/* numerador de paginas */
.pageselector {
  appearance: none;
  background-color: #f8f9fa;
  border: 2px solid #007bff;
  padding: 5px 20px 5px 7px;
  font-size: 12px;
  border-radius: 20px;
  color: #333;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  outline: none;
  transition: all 0.3s ease;
  position: relative;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23007bff'%3E%3Cpath d='M5 8l5 5 5-5H5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.pageselector:hover, .pageselector:focus {
  border-color: #0056b3;
  background-color: #e9ecef;
}

.nav-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 8px;
  font-size: 14px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  background-color: #0056b3;
}

.nav-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 20px;
  cursor: pointer;  
  transition: all 0.3s ease;
  height: 32px;
}

.search-btn:hover {
  background-color: #0056b3;
}

.search-btn .icon {
  font-size: 18px;
}

/* Tabla de expedientes */
.exptblcontainer{
  width:100%;
  height: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.exptblheader{
  width: 100%;
  height: 5vh;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.contenedor-tabla {
  width: 100%;
  height: calc(70vh - 100px);
  overflow-y: auto; /* Permite desplazamiento vertical */
  border: 1px solid #b0b0b0;
}

.tabla-expedientes {
  width: 100%;
  border-collapse: collapse;
  background-color: #e0e0e0;
}

.tabla-expedientes th{
border: 1px solid #b0b0b0;
padding: 8px;
text-align: left;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-indent: 0ex;
color: white; 
}

.tabla-expedientes td {
  border: 1px solid #b0b0b0;
  padding: 8px;
  text-align: left;

  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	font-size: 12px;
	line-height: 100%;
	word-spacing: normal;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	text-indent: 0ex;
	color: black; 
}

/* Encabezado fijo */
.tabla-expedientes thead {
  background-color: #606060; /* Color más oscuro para destacar */
  color: white;
  position: sticky;
  top: 0;
  z-index: 2;

  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	font-size: 12px;
	line-height: 100%;
	word-spacing: normal;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	text-indent: 0ex;
	color: white;  
}

.tabla-expedientes tbody tr:nth-child(even) {
  background-color: #d0d0d0;
}

.tabla-expedientes tbody tr:hover {
  background-color: #c0c0c0;
}

/* Definir el ancho de cada columna */
.col-1 { width: 4%; }
.col-2 { width: 10%;}
.col-3 { width: 9%; }
.col-4 { width: 6%; }
.col-5 { width: 6%; }
.col-6 { width: 12%; }
.col-7 { width: 14%; }
.col-8 { width: 10%; }
.col-9 { width: 15%; }

.col-7 a{
  text-decoration: none;
  color: black;
}

/* Menú contextual de expedientes */
.burger {
	cursor: pointer;
	font-size: 18px;
	color: black;
	text-decoration: none;
  }
  
.menu-popupexp {
  display: none;
  position: absolute;
  width: auto; /* Permite que el ancho sea dinámico */
  height: auto; /* Permite que la altura se ajuste al contenido */
  min-width: 150px; /* Opcional: establece un tamaño mínimo */
  min-height: 50px; /* Opcional: establece una altura mínima */
  max-width: 500px; /* Opcional: establece un ancho máximo */
  max-height: 300px; /* Opcional: establece una altura máxima */
  background: white;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.hamburguesa {
  cursor: pointer;
  font-size: 20px;
  display: inline-block;
}

  .floatmenubox{  
	width: 250px; 
	max-width: 500px;
	min-height: 200px;
	background-color: white;  
	display: flex;
	flex-direction: column;
	justify-content: flex-start; 
	padding: 5px;	
  }
  
  .floatmenuitem{
	width: 100%;
	height: 24px;
	background-color: white;
	display: flex;
	flex-direction: row;
	align-items: center;
	line-height: 24px;  
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 11px;  
  }
  
  .floatmenuitem a{
	text-decoration: none;
	color: black;  
  }
  
  .floatmenuitem a:hover{
	text-decoration: none; 
	color: white;
	background-color: #b5c1ca;
  }

.rcorners1100 {
  border-radius: 25px;
  background: #1C6EA4;
  padding: 2px; 
  width: 100%;
  height: 100%;  
}

.rcorners2100 {
  border-radius: 25px;
  background: #656565;
  padding: 2px; 
  width: 100%;
  height: 100%;  
}

.rcorners3100 {
  border-radius: 25px;
  background: #CCCCCC;
  padding: 2px; 
  width: 100%;
  height: 100%;  
}

.rcorners4100 {
  border-radius: 25px;
  background: #999999;
  padding: 2px; 
  width: 100%;
  height: 100%;  
}

.postit {
  border-radius: 25px;
  background: #FFFF00;
  padding: 5px; 
  width: 300px;
  height: 100%;  
}

.rcorners1 {
  border-radius: 25px;
  background: #1C6EA4;
  padding: 2px; 
  width: 200px;
  height: 100%;  
}

.rcorners2 {
  border-radius: 25px;
  background: #656565;
  padding: 10px; 
  width: 200px;
  height: 100%;  
}

.rcorners3 {
  border-radius: 25px;
  background: #CCCCCC;
  padding: 10px; 
  width: 200px;
  height: 100%;  
}

.rcorners4 {
  border-radius: 25px;
  background: #999999;
  padding: 10px; 
  width: 200px;
  height: 100%;  
}

.rcorners5 {
  border-radius: 25px;
  background: #bddbfa;
  padding: 10px; 
  width: 200px;
  height: 100%;  
}


.scpHeader{
  border-radius: 25px;
  background: #CCCCCC;
  padding: 5px; 
  width: 99%;
  min-height: 32px;  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.scpBloque1{
  padding: 2;  
  height: 150px;
  display: flex;  
  flex-direction: column;
  justify-content:left;  
}

.scpBoxNombre{
  padding: 10;
  background-color: tomato;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: left  
}

.scpBox3{
  border-radius: 25px;
  padding: 10;
  background-color: whitesmoke;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.scpBox33{  
  padding: 2;
  background-color: white;
  width: 100%;  
  display: flex;
  flex-direction: row;
}

.scpTitle{
  font-family: 'Roboto', san-serif;
  font-size: 18;
  font-weight: 600;
  padding: 2;   
}

.scpTitle1{
  font-family: 'Roboto', san-serif;
  font-size: 14;
  font-weight: 400;
  padding: 2; 
}

.scpFirma{
  align-items: left;
}

.scpBtn1{
  font-family: 'Roboto', san-serif;
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#727070;
	font-size:11px;
	font-weight:bold;
	padding:3px 3px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
  margin-top: 2px;
}

.scpBtn1 a{
  text-decoration: none;
  color:#5f5e5e;
}

.scpBtn1 a:hover{
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
	background-color:#dfdfdf;
  color: #000;
}

.scpBtn1 :active {
	position:relative;
	top:1px;
}

.scpBottom{
  align-items: right;
}