@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

html {
    font-size: 16px;
}

body {
    font-family: "Inter", sans-serif;
	color: var(--S950);
    min-width: 358px;
    background-color: #F6F6F6;
}

* {
    box-sizing: border-box;
}

/* Variables de color*/
:root {

    /* Primario */

    --P50: #fff8ec;
    --P100: #fff0d3;
    --P200: #ffdda5;
    --P300: #ffc36d;
    --P400: #ff9e32;
    --P500: #ff800a;
    --P600: #ff6700;
    --P700: #cc4902;
    --P800: #a1390b;
    --P900: #82310c;
    --P950: #461604;

    /* Shark */

    --S50: #f5f6f6;
    --S100: #e5e8e8;
    --S200: #cdd2d4;
    --S300: #aab3b6;
    --S400: #808c90;
    --S500: #657175;
    --S600: #565f64;
    --S700: #4a5154;
    --S800: #414649;
    --S900: #393d40;
    --S950: #26292b;


    /* Error */

    --error50: #fef2f2;
    --error100: #fde3e3;
    --error200: #fdcbcb;
    --error300: #faa7a7;
    --error400: #f46a6a;
    --error500: #eb4848;
    --error600: #d82a2a;
    --error700: #b52020;
    --error800: #961e1e;
    --error900: #7d1f1f;
    --error950: #440b0b;

    /* Exito */
    --exito50: #f0fdf5;
    --exito100: #dcfce8;
    --exito200: #bbf7d1;
    --exito300: #86efad;
    --exito400: #4ade80;
    --exito500: #22c55e;
    --exito600: #16a34a;
    --exito700: #15803c;
    --exito800: #166533;
    --exito900: #14532b;
    --exito950: #052e14;

    /* Alerta */

    --alerta50: #fef9e8;
    --alerta100: #fef0c3;
    --alerta200: #fee28a;
    --alerta300: #fdd147;
    --alerta400: #fac215;
    --alerta500: #eab308;
    --alerta600: #ca9a04;
    --alerta700: #a17c07;
    --alerta800: #85680e;
    --alerta900: #715a12;
    --alerta950: #423306;

    /* Información */

    --info50: #f0faff;
    --info100: #e0f5fe;
    --info200: #bae8fd;
    --info300: #7dd5fc;
    --info400: #38bcf8;
    --info500: #0ea5e9;
    --info600: #028ac7;
    --info700: #0370a1;
    --info800: #075e85;
    --info900: #0c506e;
    --info950: #083549;

    /* Variables de espacio */

    --medida8: 0.5rem;
    --medida12: 0.75rem;
    --medida16: 1rem;
    --medida20: 1.25rem;
    --medida24: 1.5rem;
    --medida28: 1.75rem;
    --medida32: 2rem;
    --medida36: 2.25rem;
    --medida40: 2.5rem;
    --medida44: 2.75rem;
    --medida48: 3rem;
    --medida52: 3.25rem;
    --medida56: 3.5rem;

    /* Variables de bordes radius */
    --radiusSm: 0.25rem;
    --radiusMd: 0.5rem;
    --radiusLg: 0.75rem;
}

/* Textos */

h1,
h2,
h3,
h4 {
    color: var(--S900);
    margin: 0px;
}

h1 {
    font-size: 2rem;
    line-height: 2.75rem;
    font-weight: bold;
}

h2 {
    font-size: 1.5rem;
    line-height: 2.25rem;
    font-weight: bold;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: bold;
}

h4 {
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: bold;
}

span,
label,
p {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
}

p {
    margin: 0rem;
}

strong {
    font-weight: bold;
    margin: 0px;
}
.font-semibold { font-weight: 600;}

small {
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 400;
}

i {
    font-size: var(--medida24);
}

.link{
    color: var(--P600);
    text-decoration: none;
}
.link:hover{
    text-decoration: underline;
}
.link--sinEstilo{
    text-decoration: none;
    color: initial;
	border: none;
	padding: 0;
	background: transparent;
}
/* Scroll */
::-webkit-scrollbar {
    width: 9px;
}
/* Estados */
.estado{
    background: var(--S50);
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 32px;
    padding: 0px 10px;
    border: 1px solid var(--S200);
	border-radius: var(--radiusSm);
}
.estado--pendiente{
    border: 1px solid #E2D677;
    background: #FFFAD2;
    color: #7F7022;
}

.estado--rechazado{
    border: 1px solid #FF9E9E;
    background: #FFE7E7;
    color: #FF4040;
}

.estado--aprobado{
    border: 1px solid #92DC80;
    background: #C4FFC6;
    color: #3D832C;
}

.estado--sinSubir{
    border: 1px solid #66BFFF;
    background: #DAEBFF;
    color: #425DBF;
}
/* Componentes extras */


/* Clases adicionales */
.cursor-pointer{
    cursor: pointer;
}
.gris--small{
    color: #6A6A6A;
}
.icon{
    width: 24px;
}
.grid2--movil{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.relative, .divContenedor--relative{
    position: relative;
}
.fitContent{
    width: fit-content !important;
}
.circuloNaranjo{
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #FF800A;
}
.row{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
}
.row__alignSelfCenter {
	align-self: center;
}
.row__alignItemsEnd{
	align-items: end;
}
.row--gap36{
    gap: 36px;
}
.row--gap20{
    gap: 20px;
}
.row--gap14{
    gap: 14px;
}
.row--gap8{
    gap: 8px;
}
.row--gap4{
    gap: 4px;
}
.row--nowrap{
    flex-wrap: nowrap;
}
.fw400{
    font-weight: 400;
}
.txt-center{
    text-align: center;
}
.bold{
    font-weight: bold;
}
.w100{
    width: 100%;
}
.w214{
    width: 214px;
}
.w640{
    width: 640px !important;
}
.flex-end{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.gap-12 {
	gap: var(--medida12);
}
.divContenedor--fitContent{
    height: fit-content;
}
.divContenedor--gap24{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.divLineas{
    border: 1px solid #E7E7E7;
    border-radius: 8px;
    padding: 1rem;
}
.divLineas--sinLineas{
    border: 0;
}
.mgTop8{
    margin-top: 8px;
}
.mgTop16{
    margin-top: 1rem;
}
.mgTop24{
    margin-top: 24px;
}
.mgTop32{
    margin-top: 2rem;
}
.mgTop50{
    margin-top: 50px;
}
.mgBottom8{
    margin-bottom: 8px;
}
.mgBottom16{
    margin-bottom: 1rem;
}
.mgBottom24{
    margin-bottom: 24px !important;
}
.mgBottom32{
    margin-bottom: 32px !important;
}
.mgBottom40{
    margin-bottom: 40px !important;
}
.mgBottom50{
    margin-bottom: 50px !important;
}
.color--green{
    color: #A1DD66 !important;
}
.color--red{
    color: #EB3D3D !important;
}

.form__grid2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 24px;
}
.txt_bajadaForm {
	font-size:14px;
	color: var(--S500);
	line-height: 24px;
	display: block;
}
.contenedor900{
    width: 900px;
}
.grid2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
}
.grid2--mantenedores{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
}

.grid2--autoLeft{
    grid-template-columns: auto 1fr;
}
.grid2--auto{
    grid-template-columns: auto 1fr;
}
.color-naranjo{
    color: #FF6700;
}
.fz16{
    font-size: 16px;
}

.fz18{
    font-size: 18px;
}
.BtnDevextreme--primary .dx-button-mode-text, .dx-datagrid-form-buttons-container .dx-button.BtnGuardar, .dx-button-mode-text.dx-button-default.BtnConfirm {
	font-family: "Inter", sans-serif;
    color: var(--P50) !important;
    background-color: #ff6700 !important;
}
.BtnDevextreme--primary .dx-button-mode-text.dx-state-hover, .dx-datagrid-form-buttons-container .dx-state-hover.dx-button.BtnGuardar,
.dx-button-mode-text.dx-button-default.BtnConfirm.dx-state-hover
.dx-button-mode-text.dx-button-default.BtnConfirm.dx-state-focused,
.dx-button-mode-text.dx-button-default.BtnConfirm.dx-state-hover{
	background-color: var(--P700) !important;
}
.dx-datagrid-form-buttons-container .dx-button.BtnSalir, .dx-button-mode-text.dx-button-default.BtnCancel {
  color: #0B0B0B;
  background-color: var(--P100);
}

.dx-datagrid-form-buttons-container .dx-state-hover.dx-button.BtnSalir, .dx-button-mode-text.dx-button-default.BtnCancel.dx-state-hover {
  background-color: var(--P200);
}
.groupBtnRight {
	position:absolute;
	top:36px;
	right:234px;
	z-index:1;
}
.dx-fileuploader-input-wrapper .dx-button {
	border: 1px solid #E7E7E7;
}
.dx-fileuploader-input-wrapper .dx-button:before {
	background:url(/image/fileuploader.svg) center center no-repeat;
	content: "";
	width: 25px;
	height: 36px;
	margin-left: 6px;	
}

/* ====== TRABAJADOR ====== */
/* Login */
.login{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.login__trabajador{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 510px;
    margin-top: 62px;
    gap: 32px;
    padding-bottom: 30px;
}
.lineaLogin{
    width: 100%;
    height: 1px;
    background-color: #4C4C4C;
}
.divLineaO{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    width: 100%;
}
/* Botón gris  */
.btn--gris{
    color: #4F4F4F;
    background-color: #DFDFDF;
    font-weight: 500;
}
.btn--gris:hover{
}
.btn--gris:active{
 
}
.btn--gris:disabled{
    opacity: 60%;
}
/* Login grid */
.login__grid4{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px;
    align-items: center;
}
.btn--atras{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    background-color: var(--S100)/*#D9D9D9*/; 
    border-radius: 100%;
    color: black;
}
.btn--atras:hover, .btn--gris:hover{
	background-color: var(--S200);
}
/* Contenido */
.contenido{
    padding: 20px 40px;
}
.contenido__empleoTrabajador{
    padding: 40px;
}
.contenido__grid2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.divContenedor--sinPadding{
    padding: 0px !important;
}
.divContenedor--Padding8x20{
    padding: 8px 20px !important;
}
.divContenedor--wtAuto {
	width:auto !important;
}

.divContenedor__gridLeft{
    overflow: auto;
    max-height: 570px;
}
.divContenedor__gridRight{
    overflow: auto; 
    max-height: 530px;
}
/* Empleos */

/* Fitros */
.filtros{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    box-shadow: 0px 2px 4px 0px #0000000F;
    padding: 20px 40px;
    width: 100%;
}
.filtros__row{
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
}
.filtros__row--gap16{
    gap: 16px;
}
.contenedor__responsivo{
    box-shadow: none !important;
}
.contenedor__responsivo__titulo__escritorio{
    display: block;
}
.contenedor__responsivo__titulo__responsivo{
    display: none;
}
.filtros__btn__responsivo{
    display: none;
}

/*  */
.divContenedor--detalleEmpleo{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.tituloSeccionEmpleos{
    padding: 28px 44px 20px 44px;
}
.tituloSeccionEmpleos__inputs{
    display: grid;
    grid-template-columns: 1fr 310px;
    align-items: center;
    gap: 32px;
    margin-top: 1rem;
}
.etiqueta__botones{
    padding: 0px 20px;
    height: 32px;
    background: transparent;
    border: 1px solid #6D6D6D;
    border-radius: 4px;
    cursor: pointer;
    color: #454545;
}
.etiqueta__botones:hover{
    background-color: var(--S100);
}
.etiqueta__botones--active{
    background-color: #FF800A;
    border: 1px solid #FF800A;
    color: #FFF8EC;
}
.etiqueta__botones--active:hover{
    background-color: #FF800A;
}
.etiqueta__botones2{
    padding: 0px 12px !important;
    height: 32px;
    background: var(--S100);
    border: 1px solid #6D6D6D;
    border-radius: 4px;
    cursor: pointer;
    color: #454545;
}
.contenidoCard:hover .etiqueta__botones2 {
	background-color:var(--S200);
}
.contenidoCard{
    display: flex;
    flex-direction: column;
    border-top: 1px solid #E7E7E7;
    border-bottom: 1px solid #E7E7E7;
    padding: 28px 44px;
    gap: 20px;
    cursor: pointer;
}
.contenidoCard:hover{
    background-color: var(--S50);
}
.contenidoCard__titulo{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-start;
}
.etiqueta__botones--cardEmpleo{
    padding: 0px 8px;
    color: #4F4F4F;
    cursor: auto;
}
.etiqueta__botones--cardEmpleo:hover{
    background-color: initial;
}
.contenidoCard--gap8{
    gap: 8px;
}
.contenidoCard--active{
    background-color: #FFF8EC;
}
.contenidoCard--active:hover{
    background-color: #FFF8EC;
}
.contenidoCard--activeNohover:hover{
    background: white;
}
.contenidoCard--active .etiqueta__botones{
    background-color: #FF800A;
    color: #FFF8EC;
    border: 1px solid #FF800A
}
.contenidoCard--active .etiqueta__botones2{
    background-color: #FFDDA5;
}
.contenidoCard--active i{
    color: #FF800A;
}
.contenidoCard--btnMas{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 12px 44px 20px;
}
.contenidoCard--btnMas p{
    font-weight: 500;
    color: var(--S500);
}
.listado-documento {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.listado-text {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 12px;
	margin-bottom: 12px;
}
.listado-text:last-child {
	margin-bottom: 0;
}


/* Notificaciones */
.notificacionGrid{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
}
.notificacionGrid__info{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Perfil */
.img-perfil{
    border-radius: 50%;
}
.perfilGrid{
    display: grid;
    grid-template-columns: auto 35% 35%;
    gap: 24px;
    margin-top: 36px;
}
.perfilGrid__datos{
    background-color: white;
    border: 1px solid #E7E7E7;
	border-bottom-width: 2px;
    border-radius: 8px;
    position: relative;
}
.perfilGrid__datos__nombre{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px;
}
.perfilGrid__datos__nombre .img-perfil{
    margin-bottom: 12px;
}
.perfilGrid__datos__info{
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 30px 36px;
    border-top: 1px solid #E7E7E7;
}
.editar--absolute{
    position: absolute;
    top: 14px;
    right: 20px;
}
.perfilGrid__column{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.perfilGrid__div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: white;
    border: 1px solid #E7E7E7;
	border-bottom-width: 2px;
    border-radius: 8px;
    padding: 24px 30px;
}
.perfilGrid__div__lista{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.perfilGrid__div__lista__especialidad{
    display: flex;
    align-items: center;
    background: #FFF8EC;
    height: 50px;
    padding: 0px 16px;
}
/* ====== FIN TRABAJADOR ====== */

@keyframes rotate {from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
.rotate{
    -webkit-animation: 1s rotate linear infinite;
    animation: 1s rotate linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

/* ====== ADMIN ====== */

/* Etiquetas */
.etiqueta{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
	border-radius: var(--radiusSm);
    padding: 0px 10px;
}

.etiqueta--amarillo{
    border: 1px solid #E2D677;
    background: #FFFAD2;
    color: #7F7022;
}

.etiqueta--verde{
    border: 1px solid #92DC80;
    background: #C4FFC6;
    color: #3D832C;
}

.etiqueta--rojo{
    border: 1px solid #FF9E9E;
    background: #FFE7E7;
    color: #FF4040;
}

.etiqueta--naranjo{
    border: 1px solid #FFDDA5;
    background: #FFF0D3;
    color: black;
}
.etiqueta--azul{
    border: 1px solid #66BFFF;
    background: #DAEBFF;    
    color: #425DBF;
}

.etiqueta--gris{
    border: 1px solid #D1D1D1;
    background: #F6F6F6;
    color: black;
}
.etiqueta2{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
	border: none;
    border-radius: var(--radiusSm);
    padding: 0px 12px;
}
button.etiqueta2 { cursor:pointer;}

.etiqueta2--naranjo{
    background: #FF6700;
    color: white !important;
}

.etiqueta2--rojo{
    background: #EB4848;
    color: white !important;
}
.etiqueta2--rojo:hover {
	background-color: #E83939;
}

.etiqueta2--verde{
    background: #22C55E;
    color: white !important;
}
.etiqueta2--verde:hover {
	background-color: #1C9F4C;
}
.etiqueta2--naranjoClaro{
    color: #454545;
    background: #FFDDA5;
    border: 1px solid #FF9E32;
}
.BtnDevextreme--liberar .dx-button-mode-text {
	color:#FFF;
	background-color: #22C55E;
}

.BtnDevextreme--rechazar .dx-button-mode-text {
	color:#FFF;
	background-color: #EB4848;

}
.BtnDevextreme--liberar .dx-button-mode-text.dx-state-hover {
	background-color: #1C9F4C !important;
}

.BtnDevextreme--rechazar .dx-button.dx-state-hover {
	background-color: #E83939 !important;

}

.gridDetalleUsuario{
    display: grid;
    grid-template-columns: 1fr 64px;
    gap: 24px;
    align-items: center;
    border: 1px solid #E7E7E7;
    background-color: white;
    border-radius: 12px;
    height: 80px;
    padding: 0px 26px;
}
.gridDetalleUsuario__numero{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFC36D;
    border-radius: 8px;
    width: 100%;
    height: 45px;
    font-size: 24px;
    font-weight: bold;
}


/*  */
.flexEnd__adminTitulo{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.detalleAviso__gridAdmin{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 90px;
}
.cerrarNuevoDocuemnto{
    cursor: pointer;
}
.nuevoDocumento{
    display: none;
}

/* Mantenedores */
.grid__mantenedores{
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
}
.menuMantenedores{
	display: flex;
	flex-direction: column;
	background-color: white;
	border-radius: 12px;
	border-width: 1px solid #E7E7E7;
	padding: 1rem;
	gap: 8px;
	list-style-type: none;
}
.menuMantenedores__option{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    height: 40px;
    padding: 0px 1rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    color: black;
}
.menuMantenedores__option__icon{
    color: white;
}
.menuMantenedores__option:hover{
    background-color: #FFF0D3;
}
.menuMantenedores__option:hover .menuMantenedores__option__icon { color: #FFF0D3;}
.menuMantenedores__option--active{
    background-color: #FFF0D3;
}
.menuMantenedores__option--active 
.menuMantenedores__option__icon{
    color: black;
}
.btn_menuAdmin{
    display: none !important;
    padding: 8px;
    background-color: #ff6700;
    color: white;
    border-radius: 4px;
}


/* ====== FIN ADMIN ====== */

/* Otros - tabla devexpress */

.dx-master-detail-cell { padding-left: 50px !important;}
/*.dx-master-detail-cell .dx-gridbase-container:after{
  content: "hola";
}*/
.dx-toolbar .dx-toolbar-items-container { height:auto !important;}
.dx-master-detail-cell .dx-toolbar-after/*, .dx-toolbar-before*/ { position:relative; margin-left: auto;}
.dx-toolbar .dx-toolbar-items-container {
  height: auto;
  margin: 8px 0;
}
.dx-master-detail-cell .dx-datagrid.dx-gridbase-container, .dx-master-detail-cell .dx-form .dx-layout-manager.dx-widget  {
	/*padding: 10px;*/
	border: 1px solid #E7E7E7;
	border-radius: 5px;
}
.dx-master-detail-cell .dx-form { position:relative;}
.dx-master-detail-cell .dx-form .dx-layout-manager.dx-widget { padding: 20px 20px 10px;}
.dx-master-detail-cell .dx-form .dx-layout-manager.dx-widget .dx-layout-manager.dx-widget  {
	padding: 0;
	border: none;
	border-radius: 0;
}
.dx-master-detail-cell .dx-gridbase-container:before, .dx-master-detail-cell .dx-form .dx-layout-manager.dx-widget:before {
	width: 30px;
	height: 45px;	
	content: " ";
	border-left: 1px solid #B3A7A7;
	border-bottom: 1px solid #B3A7A7;
	border-radius: 0 0 0 10px;
	position: absolute;
	top: -16px;
	left:-30px;
}



@media (max-width: 1400px) {
    /* ====== TRABAJADOR ====== */
    /* ====== FIN TRABAJADOR ====== */
}

@media (max-width: 1250px) {
    /* ====== ADMIN ====== */
    .grid2--tituloAdmin1250{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    /* ====== FIN ADMIN ====== */
}

@media (max-width: 1200px) {
    /* ====== TRABAJADOR ====== */
    /* Perfil */
    .perfilGrid{
        grid-template-columns: 1fr 1fr;
    }
    /* ====== FIN TRABAJADOR ====== */
}

@media (max-width: 1100px) {
    /* ====== TRABAJADOR ====== */
    /* Admin */
    .flexEnd__adminTitulo{
        justify-content: flex-start;
    }
    .grid2--tituloAdmin{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    /* ====== FIN TRABAJADOR ====== */
}

@media (max-width: 992px) {
    .contenedor900{
        width: 100%;
    }
    .w100--resposiva{
        width: 100%;
    }
    .grid2{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .grid2--auto{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .grid2--autoLeft{
        grid-template-columns: auto 1fr;
    }
    .flex-end__responsivoStart{
        justify-content: flex-start;
    }
    /* ====== TRABAJADOR ====== */
    .contenido__empleoTrabajador, .contenido{
        padding: 20px;
    }
    .contenido__grid2{
        grid-template-columns: 1fr;
    }
    /* Filtros */
    .contenedor__responsivo__titulo__escritorio{
        display: none;
    }
    .filtros__btn__responsivo{
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        height: 32px;
        background-color: #FFC36D;
        padding: 0px 12px;
        border-radius: 4px;
        border: 0px;
        gap: 8px;
        cursor: pointer;
        color: #454545;
    }
    .contenedor__responsivo__titulo__responsivo{
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        width: 100%;
    }
    .contenedor__responsivo{
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* bottom: -20000px; */
        bottom: -200vh;
        left: 0px;
        background-color: white;
        width: 100%;
        z-index: 10;
        padding: 20px 20px 50px;
        box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.295) !important;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        transition: all 300ms;
    }
 
    .filtros{
        padding: 20px;
    }
    .filtros__lista{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .filtros__lista .etiqueta__botones--active{
        background-color: #FFF0D3;
        border: 0px;
        color: #4B4B4B;
    }
    .etiqueta__filtros{
        width: 100%;
        text-align: left;
        height: 44px;
    }
    .cerrar__filtro, .cerrar__detalleEmpleo{
        cursor: pointer;
        color: #CECECE !important;
    }
    .tituloSeccionEmpleos__inputs{
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }
    .tituloSeccionEmpleos__inputs .row{
        flex-direction: column;
        align-items: flex-start;
    }
    /* ====== FIN TRABAJADOR ====== */


    /* ====== ADMIN ====== */
    .detalleAviso__gridAdmin{
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    /* Mantenedores */
    .grid__mantenedores{
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .menuMantenedores{
        display: none;
        position: absolute;
        margin-top: 4px;
        width: 100%;
    }
    
    .btn_menuAdmin{
        display: block !important;
    }
    /* ====== FIN ADMIN ====== */
}


@media (max-width: 768px) {
    .w640{
        width: 100% !important;
    }
    /* ====== TRABAJADOR ====== */
    /* Perfil */
    .perfilGrid{
        grid-template-columns: 1fr;
        margin-top: 20px;
    }
    /* ====== FIN TRABAJADOR ====== */


    /* ====== ADMIN ====== */
    .gridDetalleUsuario{
        width: 100%;
    }

    /* ====== FIN ADMIN ====== */
}


@media (max-width: 576px) {
    .divContenedor{
        padding: 20px !important;
    }
    /* ====== TRABAJADOR ====== */
    .divContenedor__gridRight{
        overflow: auto; 
        max-height: 430px;
    }
    /* Login */
    .login__trabajador{
        width: 90%;
        margin-top: 62px;
    }
    /* Empleos */
    .tituloSeccionEmpleos{
        padding: 20px;
    }
    .contenidoCard{
        padding: 20px;
    }
    .contenidoCard__titulo{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .divContenedor--detalleEmpleo{
        padding: 20px !important;
    }
    /* Perfil */
    .perfilGrid__datos__info {
        padding: 16px;
    }
    .perfilGrid__div{
        padding: 16px;
    }
    .perfilGrid__datos__nombre{
        padding: 16px;
    }
    .tablaSimple th, .tablaSimple td{
        padding-right: 8px !important;
    }
    /* ====== FIN TRABAJADOR ====== */


    /* ====== ADMIN ====== */
    .w100--movil{
        width: 100% !important;
    }
    .grid2--movil{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .etiquetaAdminResponsiva{
        height: auto !important;
        padding: 12px 24px !important;
    }
    .grid2--mantenedores{
        grid-template-columns: 1fr;
    }
    /* ====== FIN ADMIN ====== */

}