/*Estilos para la pagina en general*/
@font-face {
  font-family : "Roboto";
  font-weight : normal;
  src         : local("?"), url("../iconos/fonts/RobotoCondensed-Regular.ttf") format("truetype");
}
* {
  font-family     : "Roboto", sans-serif;
  margin          : 0;
  padding         : 0;
}
/* Estilos para pestañas tipo módulo auditoría del sistema  */
:root {
  --tabs-border-color     : #E0E6E7;
  --tabs-border-size      : 1px;
  --tabs-dark-color       : #F0F0F0;
  --tabs-dark-font-color  : #002137;
  --tabs-height           : 40px;
  --tabs-lite-color       : #E0E6E7;
  --tabs-lite-font-color  : #7E8C8D;
  --tabs-width            : 50%;
}
.tab_container {
  position: relative;
  padding-top: var(--tabs-height);
}

/* ocultar radios */
.tab_input {
  display: none;
}

/* pestañas */
.tab_label {
  position: absolute;
  top: 0;
  width: var(--tabs-width);
  text-align: center;
  padding: 10px;
  background: var(--tabs-dark-color);
  color: var(--tabs-lite-font-color);
  border: var(--tabs-border-size) solid var(--tabs-border-color);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}

#tab1_label { left: 0; }
#tab2_label { left: var(--tabs-width); }

/* contenido */
.tab_content {
  display: none;
  background: var(--tabs-lite-color);
  border: var(--tabs-border-size) solid var(--tabs-border-color);
  border-radius: 0 0 10px 10px;
  padding: 10px;
  z-index: 50;
}

/* pestaña activa */
.tab_input:checked + .tab_label {
  background: var(--tabs-lite-color);
  color: var(--tabs-dark-font-color);
  z-index: 80;
}

.tab_input:checked + .tab_label + .tab_content {
  display: block;
}
/* Fin de estilos para pestañas tipo módulo auditoría del sistema  */
.accordion:after {
  content     : '+'; /* Escribir el signo "mas" (+) */
  float       : right;
}
.active:after {
  content     : "-"; /* Escribir el signo "menos" (-) */
}
/* Estilos botones formularios en general */
.art {
  border          : 2px solid rgba(255, 255, 255, .5);
  border-radius   : 10px;
  cursor          : pointer;
  display         : block;
  margin-bottom   : 2px;
  padding         : 5px;
  width           : auto;
}
.art:hover {
  box-shadow  : 10000px 0 #BEC5C5 inset;
  color       : #002137;
}
.art_exp {
  /* Estilos para div en expedientes para que no se quiten al dar la tecla Esc. */
  border          : 2px solid rgba(255, 255, 255, .5);
  border-radius   : 10px;
  cursor          : pointer;
  display         : block;
  margin-bottom   : 2px;
  padding         : 5px;
/*  width           : 450px;*/
}
.art_exp:hover {
  /* Estilos para div en expedientes para que no se quiten al dar la tecla Esc. */
  box-shadow  : 10000px 0 #1FA9FF inset;
  color       : #FFFFFF;
  border      : 1px solid #7E8C8D;
}
.art_exp a {
  text-decoration   : none;
}
body {
  background-color    : #F0F0F0;
  color               : #666;
  font-family         : "Roboto Condensed", sans-serif;
  font-size           : 12px;
  height              : 100%;
  margin              : 0;
}
.boton_cerrar{
  background-color  : red;
  border-radius     : 8px;
  bottom            : 0;
  height            : 100%;
  position          : absolute;
  right             : 0;     /* pegado a la derecha */
  transition        : .5s ease;
  width             : 0;
}
#boton_menu {
  /*Estilo incial boton_menu*/
  background  : black;
  color       : #FFFFFF;
  display     : none;
  position    : relative;
  width       : 250px;
  z-index     : 1000;
}
.boton_menu, .boton_menu_lateral {
  /*Ocultar inicialmente menu y menu lateral*/
  display: none;
}
.boton_movil {
  position        : absolute;
  top             : 3px;
  left            : 5px;
  width           : 28px;
  height          : 28px;
  background      : #E0E3E7 url('../../imagenes/logo3.png')no-repeat center center;
  background-size : 42px;
  border-radius   : 100%;
}
.boton_reporte {
  /*height          : 150px;*/
  border-radius   : 12px;
  color           : #FFFFFF;
  cursor          : pointer;
  display         : inline-block;
  margin          : 3px;
  padding         : 5px;
  width           : 250px;
}
.boton_reporte1 {
  background-color: #0000FF;
}
.boton_reporte2 {
  background-color: #54840D;
}
.boton_reporte3 {
  background-color: #fe6302;
}
.boton_reporte4 {
  background-color: #10AC84;
}
.boton_reporte5 {
  background-color: #7e8c8d;
}
.boton_reporte6 {
  background-color: #E51668;
}
.boton_reporte7 {
  background-color: #301878;
}
.boton_reporte8 {
  background-color: #ba1e83;
}
.boton_reporte9 {
  background-color: #8E6014;
}
.boton_reporte10 {
  background-color: #205765;
}
.boton_reporte11 {
  background-color: #5F28CE;
}
.boton_reporte12 {
  background-color: #34495E;
}
.boton_reporte13 {
  background-color: #1b4b80;
}
.boton_reporte14 {
  background-color: #008BE1;
}
.boton_reporte15 {
  background-color: #002137;
}
.boton_reporte16 {
  background-color: #3E3E3E;
}
.boton_reporte17 {
  background-color: #8c4966;
}
.boton_reporte .img_boton_reporte {
  transition: transform 0.3s ease, filter 0.3s ease; /* Agrega una transición suave de 0.3 segundos */
}

.boton_reporte:hover .img_boton_reporte {
  transform: scale(1.2) translate(15px, -15px); /* Aumenta el tamaño en un 50% y desplaza 2px a la derecha y 2px hacia arriba */
/*  filter: brightness(20%); /* Reduce el brillo al 20% */
}

.boton_reporte:not(:hover) .img_boton_reporte {
  transform: scale(1) translate(0, 0); /* Vuelve al tamaño original y la posición original */
  filter: brightness(100%); /* Restaura el brillo original */
}
.botones {
  background      : #7E8C8D;
  border-color    : #FFFFFF;
  border-radius   : 10px;
  color           : #FFFFFF;
  cursor          : pointer;
  font-size       : 24px;
  padding         : 5px;
  width           : 450px;
}
.botones:hover {
  background-color: #1FA9FF;
}
.botones2 {
  background      : #7E8C8D;
  border-color    : #FFFFFF;
  border-radius   : 10px;
  color           : #FFFFFF;
  cursor          : pointer;
  font-size       : 18px;
  padding         : 15px;
  width           : auto;
}
.botones2:hover {
  background-color: #1FA9FF;
  color: #FFFFFF;
}
/* Para que funcione el estilo con la animacion, el(los) boton(es) con class 'botones3' deben estar en un contenedor (puede ser un div, span, etc.) con style='display: flex; justify-content: center; luego puede personalizar el width y el font-size. */
.botones3{
  background      : #008BE1;
  border          : 2px solid #1FA9FF;
  border-radius   : 8px;
  box-shadow      : #7E8C8D 2px 2px;
  color           : #FFFFFF;
  cursor          : pointer;
  font-size       : 14px;
  margin          : 5px 10px;
  padding         : 5px 10px;
  position        : relative;
  z-index         : 1;
/*  text-shadow     : 1px 1px 1px #002137;*/
}
.botones3:active{
  box-shadow    : #7E8C8D -2px -2px;
}
.botones3::after {
  background    : #1FA9FF;
  border-radius : 6px;
  bottom        : 0;
  content       : "";
  left          : 0;
  position      : absolute;
  right         : 0;
  top           : 0;
  transform     : scale(0, 0);
  transition    : all 0.2s ease;
  z-index       : -1;
}
.botones3:hover {
/*  color         : #3498db;*/
/*  box-shadow      : #7E8C8D 0px 0px;*/
}
.botones3:hover::after {
  transform: scale(1, 1);
}
/* Para que funcione el estilo con la animacion, el(los) boton(es) con class 'botones4' deben estar en un contenedor (puede ser un div, span, etc.) con style='display: flex; justify-content: center; Este a diferencia de .botones3 SI tiene el width y el font-size definidos para botones estándar. */
.botones4{
  background      : #008BE1;
  border          : 2px solid #1FA9FF;
  border-radius   : 8px;
  box-shadow      : #7E8C8D 2px 2px;
  color           : #FFFFFF;
  cursor          : pointer;
  font-size       : 20px;
  margin          : 5px 10px;
  padding         : 5px 10px;
  position        : relative;
  width           : 300px;
  z-index         : 1;
/*  text-shadow     : 1px 1px 1px #002137;*/
}
.botones4:active{
  box-shadow    : #7E8C8D -2px -2px;
}
.botones4::after {
  background    : #1FA9FF;
  border-radius : 6px;
  bottom        : 0;
  content       : "";
  left          : 0;
  position      : absolute;
  right         : 0;
  top           : 0;
  transform     : scale(0, 0);
  transition    : all 0.2s ease;
  z-index       : -1;
}
.botones4:hover {
/*  color         : #3498db;*/
/*  box-shadow      : #7E8C8D 0px 0px;*/
}
.botones4:hover::after {
  transform: scale(1, 1);
}
.botones_expediente {
  border-radius : 10px;
  color         : #666;
  cursor        : pointer;
  font-size     : 12px;
  padding       : 5px 10px 5px 10px;
}
.botones_expediente:hover {
  background-color: #1FA9FF;
  color: #FFFFFF;
}
.botones_expediente a {
  text-decoration: none;
}
/* Estilos acordeon */
button.accordion {
  border              : solid #FFFFFF 0.1px;
  background-color    : #ddd;
  color               : #023859;
  cursor              : pointer;
  font-size           : 18px;
  outline             : none;
  padding             : 10px 20px;
  text-align          : left;
  transition          : 0.4s;
  width               : 100%;
}
button.accordion2 {
  background-color    : #f1f1f1;
  border              : none;
  color               : black;
  cursor              : pointer;
  font-size           : 18px;
  outline             : none;
  padding             : 18px;
  text-align          : left;
  transition          : 0.4s;
  width               : 99%;
}

button.accordion.active, 
button.accordion:hover , 
button.accordion2:hover{
  box-shadow  : 10000px 0 #1FA9FF inset;
  color       : #FFFFFF;
}
.caret {
  /*Posicion inicial flecha (derecha) de cajas por desplegar*/
  position: absolute;
  font-size: 20px;
  right: 5px;
  top: 5px;
}
.center {
  text-align: center;
}
/* Estilos formularios en general */
.cerrar{
  font-weight : 900;
  text-align  : right;
}
.cerrar a {
  color: red;
}
.checkbox{ /* Formato checkbox selecciona/deselecciona uno a uno */
  width   : 20px;
}
.checkbox_contenido {
  background      : #9f9898;
  border          : 2px solid rgba(0,0,0,0.2);
  border-radius   : 15px;
  color           : #FFFFFF;
  display         : block;
  height          : 30px;
  margin-top      : -3px;
  width           : 90px;
}
.checkbox_contenido:after {
  color       : #FFFFFF;
  content     : attr(data-on);
  margin-top  : -7px;
  left        : 15px;
  opacity     : 0;
}
.checkbox_contenido:before {
  content : attr(data-off);
  left    : 37px;
}
.checkbox_contenido:before, .checkbox_contenido:after {
  line-height : 1;
  margin-top  : -7px;
  position    : absolute;
  top         : 50%;
  transition  : inherit;
}
.checkbox_contenido1 {
/*  border          : 2px solid rgba(0,0,0,0.2);*/
  background      : #9f9898;
  border-radius   : 15px;
  color           : #FFFFFF;
  display         : block;
  font-size       : 25px;
  height          : 34px;
  margin-top      : -3px;
  width           : 74px;
}
.checkbox_contenido1:after {
  color       : #FFFFFF;
  content     : attr(data-on);
  left        : 14px;
  opacity     : 0;
  position    : absolute;
}
.checkbox_contenido1:before {
  content : attr(data-off);
  left    : 38px;
}
.checkbox_contenido1:hover {
  box-shadow  : 6px 6px 20px -1px #acb8c9, -6px -6px 20px -1px #e8f8ff;
}
.checkbox_contenido1:before, .checkbox_contenido1:after {
  line-height : 1;
  margin-top  : -13px;
  position    : absolute;
  top         : 50%;
  transition  : inherit;
}
.checkbox_input {
  left        : 0;
  opacity     : 0;
  position    : absolute;
  top         : 0;
}
.checkbox_input1 {
  left        : 0;
  opacity     : 0;
  position    : absolute;
  top         : 0;
}
.checkbox_input:checked ~ .boton_movil {
  left    : 66px;
  top     : 3px;
}
.checkbox_input1:checked ~ .boton_movil {
  left    : 46px;
  top     : 3px;
}
.checkbox_contenido, .boton_movil {
  transition: All 0.3s ease;
}
.checkbox_contenido1, .boton_movil {
  transition: All 0.1s ease;
}
.checkbox_input:checked ~ .checkbox_contenido {
  background: #2AC176;
}
.checkbox_input1:checked ~ .checkbox_contenido1 {
  background: #2AC176;
}
.checkbox_input:checked ~ .checkbox_contenido:after {
  opacity: 1;
}
.checkbox_input1:checked ~ .checkbox_contenido1:after {
  opacity: 1;
}
.checkbox_input:checked ~ .checkbox_contenido:before {
  opacity: 0;
}
.checkbox_input1:checked ~ .checkbox_contenido1:before {
  opacity: 0;
}
.checkbox_opciones {
  cursor    : pointer;
  display   : block;
  height    : 30px;
  padding   : 3px;
  position  : relative;
}
#circulo img {
  /* Estilo imagen dentro de boton Usuario */
  border-radius   : 50%;
  height          : 40px;
  width           : 40px;
}
.comentario_botones_resp{
  width       : 240px;
}
/* Estilo contador alertas */
#contador_alertas {
  background      : red;
  border-radius   : 20px;
  left            : 39px;
  padding         : 4px;
  position        : absolute;
  text-align      : center;
  top             : 3px;
  font-size       : 12px;
  color           : #FFFFFF;
}
/* Script para visualizar "cerrar" al dar hover pestañas */
.contenedor{
  background  : #7E8C8D;
  display     : inline-block;
  left        : 0%;
  position    : absolute;
  right       : 100%;
  transition  : .5s ease;
  width       : auto;
}
.contenedor:hover .boton_cerrar{
  transform : translateX(5px);
  width     : 30px;
}
.contenedor_botones3{
  display         :flex;
  justify-content : center;
}
.contenedor_encabezado_form{
  background  : #F0F0F0;
  position    : sticky;
  top         : 0;
  z-index     : 2;
}
#contenedor_toptil {
/*  background      : #002137;*/
  background      : #d4d4d9;
  border-radius   : 10px;
  display         : none;
  font-size       : 12px;
  position        : absolute;
  right           : 5px;
  top             : 60px;
  width           : 220px;
  z-index         : 3;
}
#contenedor_toptil li {
  width   : 220px;
  color   : #002137;
}

#contenedor_toptil li:hover {
  max-width   : 200px;
}

.contenedor2 {
  left: 100%;
  right: 0;
  width: 0;
}
#contenido {
  /*Estilo general del div "contenido"*/
  float       : left;
  overflow    : scroll;
  position    : relative;
  width       : calc(100% - 150px);
  z-index     : 1;
}
.contenido {
  overflow-y: scroll;
  width: 100%;
}
.cuidado {
  background-color: #fdcd39;
}
#derecha {
  /* Estilo de boton de Usuario */
  float     : right;
  position  : relative;
}
/* Estilos tablas formularios */
.descripcion {
  background      : #1FA9FF;
  border-radius   : 3px;
  color           : #FFFFFF;
  padding         : 5px;
}
.detalle {
/*  background      : #E0E3E7;*/
  background      : #ECF1F4;
  border-radius   : 3px;
  padding         : 8px;
}
.item_param3{
  width: 215px;
}
#detalle_boton_prestamo {
  display: none;
}
div.panel{
  /*max-height            : 400px; es posible 75vh*/
  overflow          : auto;
  background-color    : white;
  display             : none;
  width               : 100%;
  transition          : 0.4s;
}
/*Estilo de encabezado para la pagina en general*/
#encabezado {
/*  background-image    : url('../../imagenes/encabezado_transparente.png');*/
  background-repeat   : no-repeat;
  background-size     : 240px 60px;
  color               : #002137;;
  float               : right;
  height              : 60px;
  width               : calc(100% - 150px);
  z-index             : 500;
}

#encabezado nav ul li {
  /* Estilo de Iconos Superior Izquierda*/
/*  border-top  : solid #1FA9FF 1px;*/
  box-shadow  : 0px 0 #9EDAFF inset;
  cursor      : pointer;
  display     : inline-block;
  padding     : 10px;
  position    : relative;
/*  transition  : all 0.5s;*/
}
#encabezado nav ul li:hover {
  /*Animacion de llena caja otro color al hover*/
  box-shadow      : 500px 0 #9EDAFF inset;
  border-radius   : 10px;
}
#encabezado nav ul li a {
  /*Estilo inicial de los select*/
/*  color           : #FFFFFF;*/
  color           : #002137;
  display         : inline-block;
  margin-left     : 5px;
  margin-right    : 0px;
  text-decoration : none;
}
#encabezado nav ul li a span {
  /*Espacio entre icono y texto*/
  margin-right  : 5px;
}
#encabezado nav ul li .children {
  /*Estilo inicial cajas desplegadas */
/*  background  : #002137;*/
/*  color       : #FFFFFF;*/
  background  : #FFFFFF;
  color       : #002137;
  display     : none;
  position    : absolute;
  width       : 320px;
  z-index     : 1000;
}
#encabezado nav ul li .children li {
  /*Estilo de borde inferior de cada caja*/
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  display: block;
  overflow: hidden;
}
/* Formato errores (div) que se muestran */
.errores {
  background    : #F15946;
  border-radius : 10px;
  box-shadow    : 0 0 10px rgba(0, 0, 0, 0.3);
  color         : #FFFFFF;
  display       : none;
  font-size     : 12px;
  padding       : 5px;
  position      : relative;
  text-align    : center;
}
.errores2 {
  background    : #F15946;
  border-radius : 10px;
  box-shadow    : 0 0 10px rgba(0, 0, 0, 0.3);
  color         : #FFFFFF;
  display       : none;
  font-size     : 12px;
  padding       : 5px;
  position      : relative;
  text-align    : center;
}
fieldset{
  border        : solid 1px #7033FF;
  border-radius : 5px;
  padding       : 5px;
}
.fila1 {
  background-color: #E8F4FB;
}
.fila2 {
  background-color: #FFFFFF;
}
.fila1 td {
  padding: 10px;
}
.fila2 td {
  padding: 10px;
}
.fila1:hover,.fila2:hover{
  background-color  : #D2D2D2;
  color             : #002137;
}
.flecha_abajo{
  position  : absolute;
  right     : 10px;
  top       : 6px;
  width     : 15px;
}
/* Fin formato errores (div) que se muestran */
.footer {
  color  : #023859;
}
.footer a {
  color: #023859;
}
.footer a:hover {
  color: #B40431;
}
form input {
  /* Estilo de la barra del buscador e input internos */
  /*border-color        : #FFFFFF;*/
  border              : 1px inset #1FA9FF;
  border-radius       : 8px;
  padding             : 6px;
  width               : 95%;
}
/* Al enfocar un input del formulario, select o textarea pone borde color azul */
form input:focus,
.select_opciones:focus,
.select_opciones2:focus,
textarea:focus{
  border-color: #1FA9FF;
}
.hidden {
  display: none;
}
.hover_pointer {
  border          : 2px solid rgba(255, 255, 255, .5);
  cursor          : pointer;
  margin-bottom   : 2px;
  padding         : 5px;
  transition      : 0.3s;
}
.hover_pointer:hover {
  /* Estilos para div en expedientes para que no se quiten al dar la tecla Esc. */
  box-shadow      : 10000px 0 #A8BAC6 inset;
  color           : #FFFFFF;
  border-radius   : 12px;
  border          : 1px solid #9EDAFF;
}
.img_boton_reporte{
  bottom    : -25px;
  left      : -15px;
  opacity   : 0.2;
  position  : relative; 
  width     : 100px;
}
.img_cerrar {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 15%;
  left: 15%;
}
.indicador_campo_actualizado{
  background-color  : #666;
  border-radius     : 10px;
  float             : left;
  height            : 15px;
  width             : 15px;
}
input[type="email"],
input[type="number"]{
  box-sizing: border-box;
}
.input_search {
  border-radius   : 8px;
  padding         : 6px;
  width           : 98%;
}
/**
 * Estilo para "focus" animado de los input de formularios
 * Se debe tener en cuenta que cada input junto con el label deben estar en el mismo <div>.
 * El label debe tener "for =" al id del input
 * El width del input debe ser el mismo del margin-left(negativo) del label.(input width='100'--> label margin-left: -100px)
 * El input debe tener un placeholder de espacio (placeholder=' ')
 * El input debe tener el class='input_con_label'
 * El title del input, el title del label y el contenido del label es el mismo valor.
 * @example
 * <div>
    <input type="search" id="emp_entidad" class="input_con_label" style="width: 265px;" title="Ingrese la Empresa / Entidad a quien va dirigido el documento" autocomplete="off" placeholder=" ">
    <label for="emp_entidad" style="margin-left: -270px;" title="Ingrese la Empresa / Entidad a quien va dirigido el documento">Empresa / Entidad / Persona Natural</label>
  </div>
**/
.input_con_label {
  background-color  : #0000001a;
  border-radius     : 8px;
  cursor            : pointer;
  font-size         : 15px;
  margin            : 0px 8px 0.1% 0.1%;
  padding           : 5px;
}
.input_con_label:focus ~ label,
.input_con_label:not(:placeholder-shown)~ label
{
  transform   : translateY(-26px) translateX(-7px);
}
.input_con_label2 {
  background-color  : #f0f0f0;
  border            : 1px inset #1FA9FF;
  border-radius     : 4px;
  cursor            : pointer;
  margin            : 0px 8px 0.1% 0.1%;
  padding           : 10px;
  width             : 200px;
}
.input_con_label2:focus ~ .label2,
.input_con_label2:not(:placeholder-shown)~ .label2
{
  transform   : translateY(-20px) translateX(-2px);
}
.item_param{
  border-radius   : 8px;
  border          : 1px solid #FFFFFF;
  background-color: #E0E6E7;
  color           : #002137;
  cursor          : pointer;
  flex-basis      : 150px;
  flex-grow       : 1;
  flex-shrink     : 1;
  font-size       : 14px;
  font-style      : italic;
  margin          : 2px;
  padding         : 10px;
  text-align      : justify;
  transition      : 0.3s;
/*  width           : 98%;*/
}
.item_param:hover{
  border          : 1px solid #008BE1;
  border-radius   : 12px;
}
.item_param2{
  background-color: #E0E6E7;
  border          : 1px solid #E0E6E7;
  border-radius   : 8px;
  box-sizing      : border-box; /* Incluye bordes y padding en el ancho */
  color           : #002137;
  cursor          : pointer;
  display         : block; /* Asegura un comportamiento en bloque */
  flex-basis      : auto;
  flex-grow       : 1;
  flex-shrink     : 1;
  font-size       : 14px;
  font-style      : italic;
  margin          : 2px;
  padding         : 10px;
  text-align      : justify;
  transition      : 0.3s;
/*  flex-basis      : 150px;*/
/*  width           : 100%; */
}
.item_param2:hover{
  border          : 1px solid #7e8c8d;
}
.item_param3{
  border          : 1px solid #E0E6E7;
  border-radius   : 8px;
  box-sizing      : border-box; /* Incluye bordes y padding en el ancho */
  color           : #002137;
  display         : block; /* Asegura un comportamiento en bloque */
  flex-basis      : auto;
  flex-grow       : 1;
  flex-shrink     : 1;
  font-size       : 14px;
  font-style      : italic;
  margin          : 2px;
  padding         : 10px;
  text-align      : justify;
  transition      : 0.3s;
  width           : 235px; /* Porque por defecto los input y sus label tienen 200px de ancho */
}
.item_param3 textarea{
  background-color  : #F0F0F0;
  border-radius     : 5px;
  padding           : 10px;
  width             : 90%;
}
.item_param2 textarea{
  background      : #F0F0F0; /* Estilo de fondo */
  border-radius   : 5px;
  box-sizing      : border-box; /* Incluye padding y bordes en el ancho total */
  max-width       : 100%; /* Evita que el textarea se desborde */
  padding         : 10px; /* Mantiene el padding deseado */
  width           : 100%; /* El ancho del textarea se adapta al contenedor */
}
.justify {
  text-align: justify;
}
/* Estilo para que funcione el "focus" animado de .input_con_label */
label{
  padding     : 8px;
/*  position    : absolute;*/
  transition  : 0.5s;
}
.label2{
  background  : #F0F0F0;
  color       : #008BE1;
  margin      : 12px 0px 0px -200px;
  padding     : 0px 5px;
  position    : absolute;
  transition  : 0.5s;
}
.label2_obligatorio{
  color: red;
}
legend{
  color       : #7033FF;
  font-size   : 14px;
  font-weight : bold;
  padding     : 5px;
}
#logo_empresa {
  float     : left;
  padding   : 5px 15px;
  width     : 120px;
}
/*Estilo de menu_izquierda para la pagina en general*/
#menu_izquierda {
  /*Estilo tamaño menu_izquierda*/
  float     : left;
  position  : relative;
  width     : 150px;
  z-index   : 20;
}
#menu_left div {
  /*Estilo inicial menu_izquierda*/
  background  : #002137;
  float       : left;
  width       : 100%;
  z-index     : 900;
}
#menu_left nav ul {
  /*Estilo borde redondeado caja principal*/
  border-radius : 10px;
  list-style    : none;
}
#menu_left nav ul li {
  /*Estilo inicial cajas menu_left*/
  border-top  : solid #1FA9FF 1px;
  box-shadow  : 0px 0 #1FA9FF inset;
  color       : #FFFFFF;
  cursor      : pointer;
  display     : block;
  font-size   : 13px;
  padding     : 5px 10px;
  position    : relative;
  transition  : all 0.5s;
}
#menu_left nav ul li:hover {
  /*Animacion hover llenar caja con otro color*/
  border-radius   : 10px;
  box-shadow      : 700px 0 #1FA9FF inset;
}
#menu_left nav ul li a {
  /*Estilo inicial menu_left*/
  color           : #FFFFFF;
  display         : inline-block;
  font-size       : 12px;
  margin-left     : 10px;
  text-decoration : none;
}
#menu_left nav ul li a span {
  /*Estilo flechas derecha de boton*/
  margin-right  : 2px;
  margin-top    : 10px;
}
#menu_left nav ul li .children {
    /*Estilo incial cajas desplegables*/
    background  : #002137;
    color       : #FFFFFF;
    display     : none;
    width       : 190px;
    z-index     : 1000;
}
#menu_left nav ul li .children li {
  /*Borde inferior cajas desplegadas*/
  border-top      : solid #1FA9FF 1px;
  cursor          : pointer; 
  display         : block;
  overflow        : hidden;
  padding         : 5px 15px;
}
#menu_left nav ul li .children li a {
  /*Estilo inicial submenu de menu_left*/
  display: block;
}
#mostrar_boton_prestamo:hover #detalle_boton_prestamo {
  display: block;
}
#mostrar_boton_prestamo:hover #informacion_boton_prestamo {
  display: none;
}
.normal {
  background-color: #0077f7;
}
#pestanas_principal {
  float: left;
  height: 30px;
  width: calc(100% - 150px);
  overflow-x: hidden;
}
/* Estilos select en general */
.select_opciones {
  border-radius   : 10px;
  padding         : 5px;
}
.select_opciones:hover {
  background-color: #c7d3df;
  border: solid 2px #2AC176;
}
.select_opciones2 {
  background      : #f0f0f0;
  border          : outset 1px #1FA9FF;
  border-radius   : 4px;
  cursor          : pointer;
  padding         : 10px;
  width           : 100%;
}
.span_select{
  background  : #F0F0F0;
  color       : #008BE1 ;
  margin      : -8px 6px;
  padding     : 0px 3px;
  position    : absolute;
}
.span_select2{
  background  : #E0E6E7;
  color       : #008BE1 ;
  margin      : -8px 6px;
  padding     : 0px 3px;
  position    : absolute;
}
.subtitulo{
  color: #EF452C;
}
.subtitulo2{
  color         : #008be1;
  font-size     : 15px;
  font-weight   : bold;
}
.subtitulo3{
  color: green;
}
.tab_a {
  display   : block;
  height    : auto;
  width     : 100%;
}
.tabla_con_bordes tr td{
  border  : solid 0.5px #E0E3E7;
}
/* Fin estilos formularios en general */
#tipo_ambiente{
  background-color  : rgb(241, 89, 70);
  border-radius     : 8px;
  color             : white;
  font-size         : 12px;
  font-weight       : bold;
  margin            : 10px 160px;
  max-height        : 100px;
  padding           : 5px;
  position          : absolute;
  text-align        : center;
  width             : 165px;
  z-index           : 1;
}
/* Estilo para titulos de input. */
.title_informacion_general{
  font-size   : 14px;
  color       : #008BE1;
}
/* Estilos para pestañas en entrada/lista_radicados.php*/
ul.tabs {
  /*--Set height of tabs--*/
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
  float: left;
  height: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
ul.tabs li {
  border-left: none;
  border: 1px solid #999;
  float: left;
  height: 31px;
  line-height: 31px;
  margin-bottom: -1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

ul.tabs li a {
  border          : 1px solid #fff;
  color           : #FFFFFF;
  display         : block;
  outline         : none;
  padding         : 0 10px;
  text-decoration : none;
  transition      : 0.3s;
}
ul.tabs li a:hover {
  background  : #BEC5C5;
  color       : #666;
}

ul.tabs li.focus {
  background  : #D8D8D8;
}
ul.tabs li.focus a{
  color       : #666;
}
ul.tabs li.focus:hover a{
  background  : #BEC5C5;
  color       : #FFFFFF;
}
.ventana_modal {
  /* Formato de la ventana modal */
  background-image    : url(../../imagenes/bg-modal.png);
  color               : #FFFFFF;
  display             : none;
  height              : 100%;
  left                : 0;
  position            : fixed;
  top                 : 0;
  width               : 100%;
  z-index             : 100;
}
.ventana_modal .form {
  /* Centrar formulario */
  background-color    : #F0F0F0;
  border-radius       : 20px;
  color               : #666;
  height              : auto;
/*  left                : 10%;*/
  overflow            : scroll; 
  padding             : 10px;
  position            : absolute;
/*  right               : 10%;*/
  text-align          : center;
/*  top                 : 5%;*/
  width               : auto;
}
.ventana_modal .form2 {
  /* Centrar formulario */
  background-color    : #F0F0F0;
  border-radius       : 20px;
  color               : #666;
  height              : auto;
  overflow            : scroll; 
  padding             : 10px;
  position            : absolute;
  text-align          : center;
  top                 : 5%;
  width               : auto;
}
.ventana_modal .form table {
  /* Formato tabla en formulario Agregar Nueva Dependencia */
  text-align  : left;
  width       : 100%;
}

/*Hasta aqui terminan los estilos al encabezado cuando es movil o ventana menos de 768px de principal3.php*/

/* Desde aqui los estilos para las tablas con buscador e iconos de descarga. */
.buscador_consulta {
  background-color  : transparent;
  border            : none;
  outline           : none;
  padding           : 10px 5px;
  width             : 100%;
}
.buscador_consulta:focus{
  color             : #FFF;
}

.contenedor_buscador_tabla {
  align-items       : center;
  background-color  : #D4D9D9;
  border-radius     : 18px;
  cursor            : pointer;
  display           : flex;
  padding           : 0 18px;
  margin-bottom     : 5px;
  transition        : .2s;
  width             : 35%;
}

.contenedor_buscador_tabla:hover,
.contenedor_buscador_tabla:focus-within{
  width             : 45%;
  background-color  : #7e8c8d;
  box-shadow        : 2px 2px blue;
}

.contenedor_buscador_tabla img {
  height  : 20px;
  width   : 20px;
}

.contenedor_iconos_descarga{
  position  : relative;
}

.contenedor_iconos_descarga .contenedor_iconos_descarga_btn {
  background      : #9EDAFF url("../../imagenes/iconos/icono_descarga.png") center / 60% no-repeat;
  border-radius   : 50%;
  display         : inline-block;
  height          : 10px;
  transition      : .2s ease-in-out;
  width           : 10px;
}

.contenedor_iconos_descarga .contenedor_iconos_descarga_btn:hover { 
  background-color  : #002137;
  cursor            : pointer;
  transform         : scale(1.15);
}

.contenedor_iconos_descarga input{
  display   : none;
}

.contenedor_iconos_descarga .contenedor_iconos_descarga_options {
  border-radius     : 10px;
  box-shadow        : 0 2px 8px #0004;
  opacity           : 0;
  overflow          : hidden;
  position          : absolute;
  right             : 0;
  text-align        : center;
  transform         : scale(.8);
  transform-origin  : top right;
  transition        : .2s;
  width             : 90px;
}

.contenedor_iconos_descarga input:checked + .contenedor_iconos_descarga_options {
  opacity     : 1;
  transform   : scale(1);
  z-index     : 100;
}

.contenedor_iconos_descarga .contenedor_iconos_descarga_options label{
  align-items       : center;
  background-color  : #f2f2f2;
  display           : flex;
  justify-content   : space-around;
  transition        : .2s ease-in-out;
}

.contenedor_iconos_descarga .contenedor_iconos_descarga_options label:first-of-type{
  background-color  : #fbdd88 !important;
  padding           : 1rem 0;
}

.contenedor_iconos_descarga .contenedor_iconos_descarga_options label:hover{
  background-color  : #fff;
  cursor            : pointer;
  transform         : scale(1.05);
}

.contenedor_iconos_descarga .contenedor_iconos_descarga_options img{
  height  : 20px;
  width   : 20px;
}

.icon_arrow {
    border-radius   : 12px;
    display         : inline-block;
    height          : 15px;
    margin-left     : 2px;
    text-align      : center;
    transition      : .2s ease-in-out;
    width           : 15px;
}

.icon_arrow img {
  margin-top  : 0px;
  width       : 15px;
}

.section_encabezados_tabla {
  align-items       : center;
  background-color  : #fff4;
  display           : flex;
  justify-content   : space-between;
  padding           : 0px 15px;
}

.status {
  border-radius   : 10px;
  padding         : 5px 0px;
  text-align      : center;
}

.status.verde {
    background-color  : #86e49d;
    color             : #006b21;
}

.status.rojo {
    background-color  : #d893a3;
    color             : #b30021;
}

.status.pendiente {
  background-color  : #fbdd88;
  color             : #c65707;
}

.status.azul {
  background-color  : #6fcaea;
}

.tabla_filtra{
  border-collapse : collapse;
  table-layout    : fixed;
  width           : 100%;
}

.tabla_filtra td{
  text-align      : left;
}
.tabla_filtra th{
  background-color  : #1FA9FF;
  color             : #FFFFFF;
  cursor            : pointer;
  font-size         : 14px;
  left              : 0;
  padding           : 10px;
  position          : sticky;
  text-transform    : capitalize;
  top               : 0;
  white-space       : nowrap;
}

.tabla_filtra th, .tabla_filtra td{
  border-bottom   : 1px solid #ddd;
  overflow        : hidden;
  padding         : 12px;
  text-overflow   : ellipsis;
}
.tabla_filtra tr {
  --delay     : .1s;
  transition  : .5s ease-in-out var(--delay), background-color 0s;
}

.tabla_filtra tr.hide {
  opacity     : 0;
  transform   : translateX(100%);
}

.tabla_filtra tr:hover{
  background-color: #fff6 !important;
}

.tabla_filtra tr.hide td,
.tabla_filtra tr.hide td p {
    padding: 0;
    font: 0 / 0 sans-serif;
    transition: .2s ease-in-out .5s;
}

/* Estilo para que la tabla tenga estilo "Cebra" (blanco-oscuro) */
.tabla_filtra tr:nth-child(even){
  background-color  : #f2f2f2;
}

.tabla_filtra thead th:hover span.icon_arrow{
  border  : 1.4px solid #002137;
}

.tabla_filtra thead th:hover {
  color   : #002137;
}

.tabla_filtra thead th.active span.icon_arrow{
  background-color  : #002137;
  color             : #FFFFFF;
}

.tabla_filtra thead th.asc span.icon_arrow{
  transform   : rotate(180deg);
}

.tabla_filtra thead th.active,tbody td.active {
  color   : #002137;
}

/*Se inicia estilos al encabezado cuando es movil o ventana menos de 768px de principal3.php*/
@media screen and (max-width: 768px){
  .art_exp {
    width           : auto;
  }
  body {
    /*Estilo para que inicie debajo del encabezado*/
    padding-top : 35px;
  }
  #boton_alertas{
    left     : 0px;
  }
  #boton_menu {
    /*Estilo incial boton_menu*/
    display   : block;
  }
  .boton_menu {
    /*Estilo del boton menu*/
    /*background: #023859;*/
    display     : block;
    position    : fixed;
    top         : 0px;
    width       : 50%;
    height      : 35px;
  }
  .boton_menu .bt-menu {
    /*Estilo 2 del boton menu*/
    color           : #FFFFFF;
    display         : block;
    font-size       : 15px;
    font-weight     : bold;
    overflow        : hidden;
    padding         : 10px 31px;
    text-decoration : none;
  }
  .boton_menu_lateral {
    /*Estilo boton menu_lateral*/
    display       : block;
    margin-left   : 50%;
    position      : fixed;
    top           : 0px;
    width         : 50%;
    height        : 35px;
  }
  .boton_menu_lateral .bt-menu {
    /*Estilo 2 boton menu_lateral*/
    color           : #FFFFFF;
    display         : block;
    font-size       : 15px;
    font-weight     : bold;
    overflow        : hidden;
    padding         : 10px 30px;
    text-align      : right;
    text-decoration : none;
  }
  .boton_reporte{
    margin          : 0 0 2px 20px;
    text-align  : center;
    width       : 85%;
  }
  .boton_reporte table{
    width       : 95%;
  }
  .caret {
    /*Boton flechas (derecha) en submenu*/
    font-size   : 25px;
    position    : absolute;
    right       : 10px;
  }

  .cerrar{
    position    : fixed;
    right       : 20px;
  }
  /* Estilos de comentario de botones de alertas */
  .comentario_botones_resp{
    font-size   : 20px;
    width       : 350px;
  }
  .contenedor_buscador_tabla:hover{
    width : 100%;
  }
  .contenedor_iconos_descarga{
    display: none;
  }
  /* Desde aqui es el estilo para móviles del contenido*/
  #contenido {
    width     : 100%;
  }
  #contenedor_toptil {
    left          : 0%;
    margin-left   : 20px;
    margin-top    : 80px;
    position      : absolute;
    width         : 75%;
    z-index       : 2;
  }
  #derecha {
    /* Estilo de boton de Usuario */
/*    position  : absolute;*/
  }
  #encabezado {
    /*Estilo inicial del encabezado (movil)*/
    background-image    : url('../../imagenes/encabezado_transparente.png');
    background-color    : #002137;
    background-position : center;
    background-size     : 100px 35px;
    height              : 35px;
    position            : fixed;
    top                 : 0;
    width               : 100%;
    z-index             : 1000;
  }
  #encabezado nav {
    /*Estilo inicial submenu encabezado*/
    background  : #002137;
    height      : calc(100% - 35px);
    margin      : 0;
    overflow    : scroll;
    position    : fixed;
    right       : 100%;
    top         : 35px;
    width       : 80%;
  }

  #encabezado nav ul li {
    display   : block;
  }

  #encabezado nav ul li a {
    /*Estilo inicial encabezado submenu2*/
    display   : inline-block;
  }
  #encabezado nav ul li .children {
    /*Estilo inicial encabezado submenu*/
    position  : relative;
    width     : 100%;
  }
  #encabezado nav ul li:hover .children {
    /*Estilo para que no se vea la animación
    de llenar la casilla en los dispositivos móviles*/
    display: none;
  }
  hr {
    display:none;
  }
  #menu_left nav {
    /*Estilos menu_left moviles*/
    background  : black;
    height      : calc(100% - 35px);
    margin      : 0;
    overflow    : scroll;
    position    : fixed;
    right       : 100%;
    top         : 35px;
    width       : 65%;
  }
  #menu_left nav ul li a {
    /*Estilo bloques en menu_left*/
    display: inline-block;
  }
  #menu_left nav ul li a span {
    /*Estilo flechas derecha de boton*/
    margin-top: 0px;
  }
  #menu_left nav ul li .children {
    /*Posición y ancho de submenús desplegados*/
    position: relative;
    width: 100%;
  }
  #menu_left nav ul li .children li a {
    /*Margen de los titulos de submenús*/
    margin-left: 20px;
  }
  #menu_left nav ul li:hover .children {
    /*Estilo para que no muestre animacion llenar casilla en móviles*/
    display: none;
  }
  #pestanas_principal {
    display:none;
  }
  .tabla_filtra th{
    text-align      : justify;
    text-overflow   : inherit;
    white-space     : wrap;
  }
  #tipo_ambiente{
    cursor      : pointer;
    height      : 25px;
    margin      : -35px 0px 0px 80px;
    width       : 145px;
    z-index     : 1000;
  }
  #ventana_archivar_radicado h1{
    margin-top: 15px;
  }
  .h1_ventana{
    margin-top: 15px;
  }
  /* Hasta aqui es el estilo para móviles del contenido*/
}