/* components.css: componentes reutilizables (botones, forms, menús, modales, alertas, etc.) */

main{
	position: relative;
	/* margin-top: -7px; */
}
.form-control:focus{
	box-shadow: none;
}
.logoSeccion{
	position: relative;
	text-align: center;
	padding: 7px 0;
	height: 55px;
}
.img-logo{
	height: 100%;
}
.usuario{
	padding: 10px 20px;
	color: #4d4d4d;
	border-bottom: 1px solid #00000050;
}
.imgIzq{
	width: 60px;
	height: 60px;
	padding: 0;
	float: left;
	border-radius: 10px;
	background: #F4F4F4;
	border: 2px solid #BC955C;
}
.imgIzq img{
	object-fit: cover;
	height: 100%;
	width: 100%;
}
.datDer{
	width: calc(100% - 60px);
	float: left;
	padding-top: 10px;
	padding-left: 12px;
	line-height: 1;
}
.datDer p{
	font-size: 12px;
	font-weight: 700;
}
.datDer label{
	font-size: 11px;
	font-weight: 600;
}
.bodyMenu{
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
.bodyMenu p{
	padding: 10px;
	font-size: 12px;
	font-weight: 700;
	/* VF: #BB965C sobre el fondo del panel de menú daba 2.75:1 (WCAG2AA exige
	   4.5:1) -- #957036 es la corrección de contraste recomendada por pa11y. */
	color: #957036;
}
.footMenu{
	position: relative;
	z-index: 31;
	flex-shrink: 0;
	margin-top: auto; /* lo ancla al fondo de #menuIzq cuando hay espacio libre; si el
	                      menú desborda (varios roles), simplemente queda justo debajo,
	                      sin dejar hueco ni encimarse */
	width: 100%;
	height: 35px;
	text-align: center;
	border-top: 1px solid #00000050;
	background: #fff;
}
.btnClose{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 35px;
	line-height: 35px;
	background: #9f1f41;
	color: #fff;
	font-weight: 600;
	transition: .8s background;
}
.btnClose:focus{
	cursor: pointer;
	background: #6F1228;
}
.btnClose i{
	font-size: 20px;
}
.btnClose:hover i, .btnClose:hover img{
	opacity: 0;
}
.btnClose:hover:before{
	opacity: 1;
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
}
.btnClose:before{
	content: attr(data-hover);
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
	line-height: 35px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	font-size: 12px;
	opacity: 0;
	-webkit-transform: translate(-100%,0);
	transform: translate(-100%,0);
	-webkit-transition: all .3s ease-in-out;
	transition: all .5s ease-in-out;
}
.boxA ul li{
	height: 45px;
}
.boxA ul li.active{
	background: #ddc9a582;
}
.boxA ul li a {
	display: inline-block;
	width: 100%;
	text-decoration: none;
	position: relative;
	padding: 8px 10px 8px 10px;
	border-bottom: 1px solid #bc955c20;
	transition: all .5s ease-out;
}
.boxA ul li a:hover {
	background: #bc955c;
}
.iPr {
	width: 30px;
	height: 30px;
	float: left;
	font-size: 15px;
	padding: 5px;
	border-radius: 10px;
	background: #f4f4f4;
	transition: .5s all;
}
/* Variante para íconos de fuente (Font Awesome) en vez de <img> — mismo
   tamaño/caja que .iPr, pero centrando el glifo (box-sizing incluye el
   padding, y .iPr no define box-sizing propio). Verde, igual que el resto
   de los íconos del menú. */
.iPr--icon {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #005246;
}
.boxA ul{
	padding-left: 0;
}
.boxA ul li{
	list-style-type: none;
}
.boxA ul li a span {
	display: block;
	position: absolute;
	transform: translateY(-50%);
	left: 40px;
	top: 50%;
	width: calc(100% - 40px);
	float: left;
	color: #4d4d4d;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 700;
	padding-left: 5px;
	transition: all .3s;
}
.boxA ul li a:hover span {
	color: #fff;
	font-weight: 700;
}
.boxA a:hover .iPr {
	padding: 3px;
}
/* Los <img> "crecen" con el padding reducido; los íconos de fuente (.iPr--icon)
   no tienen ese efecto por sí solos, así que se animan aparte con un ligero
   zoom (la transición ya la hereda de .iPr: "transition: .5s all;"). Sin
   cambio de color: se mantiene verde para no perderse sobre el fondo dorado
   del hover. */
.boxA a:hover .iPr--icon {
	transform: scale(1.15);
}
/*    boxA ul li.disabled    */
.boxA ul li.disabled a:hover {
	background: unset;
}
.boxA ul li.disabled a span{color: #d2d1d1;}
.boxA ul li.disabled a:hover span {
	color: #d2d1d1;
}
.boxA ul li.disabled a:hover .iPr {
	padding: 5px;
}
.boxA ul li.disabled a:hover .iPr--icon {
	transform: none;
}

/* Secciones del menú agrupadas por rol (usuarios con más de un rol) */
.menu-role-group {
	margin-bottom: 6px;
}
.menu-role-group + .menu-role-group {
	border-top: 1px solid #ece5d8;
	margin-top: 6px;
	padding-top: 6px;
}
.menu-role-title {
	margin: 4px 0 2px;
	padding: 6px 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	background-color: #f2f2f2;
}
.menu-role-group--administrador .menu-role-title { color: #235B4E; }
/* VF: #BB965C sobre el fondo #f2f2f2 de esta etiqueta daba 2.46:1 (pa11y/WCAG2AA
   1.4.3 exige 4.5:1) -- #8d682e es la corrección de contraste recomendada por
   pa11y, conserva la misma familia de color (dorado/capturista). */
.menu-role-group--capturista .menu-role-title    { color: #8d682e; }
.menu-role-group--revisor .menu-role-title       { color: #9F1F41; }

/* Menú compacto en pantallas/ventanas de poca altura (ej. zoom alto, laptops
   chicas): reduce el alto de cada ítem para que un usuario con varios roles
   quepa sin forzar scroll de página, sin necesitar un scroll propio del menú. */
@media (max-height: 800px) {
	.logoSeccion{ height: 42px; padding: 4px 0; }
	.usuario{ padding: 6px 20px; }
	.imgIzq{ width: 40px; height: 40px; }
	.bodyMenu p{ padding: 6px 10px; }
	.menu-role-title{ padding: 4px 10px; margin: 2px 0 1px; }
	.boxA ul li{ height: 36px; }
	.boxA ul li a{ padding: 4px 10px; }
	.iPr{ width: 24px; height: 24px; padding: 4px; }
	.footMenu, .btnClose{ height: 30px; line-height: 30px; }
}
/*        */
.btnCollapse{
	width: 40px;
	height: 40px;
	border-radius: 30px 0 0 30px;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	right: 0;
	font-size: 22px;
	padding-right: 0px;
	color: #fff;
	background: #BB965C;
	transition: all .5s ease-in-out;
}
.btnCollapse:hover{
	width: 50px;
	background: #681c32;
	padding-right: 15px;
}
.btnCollapseMovil{
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 0 30px 30px 0;

  position: fixed;
  top: calc(var(--gmx-h) + 10px) !important;
  left: 0;
  transform: none;

  font-size: 22px;
  padding-right: 0px;
  color: #fff;
  background: #BB965C;
  transition: all .5s ease-in-out;
  z-index: 1000;
}
.btnCollapseMovil, .btnCollapse{
  padding: 5px;
}
.btnCollapseMovil:hover, .btnCollapse:hover{
  width: 50px;
  background: #681c32;
  padding: 5px;
}
.btnCollapseMovil, .btnCollapse{
	padding: 5px;
}
.btnCollapseMovil:hover, .btnCollapse:hover{
	width: 50px;
	background: #681c32;
	padding: 5px;
}
/*REGISTRO*/
.limitForm{
	padding: 20px 30px;
}
h2.tit-prin{
	font-size: 22px;
	font-weight: 700;
	text-align: center;
}
.subtit{
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
	margin: 1%;
}


.subenun .subtit{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;

  margin: 0;              
  margin-bottom: 10px;    
}


.subenun{
  padding-left: 18px;   
  padding-right: 18px;  
}

.subenun .subtit{
  margin: 0;
  margin-bottom: 10px;  
}


/* El input — filtros de Usuarios y de Catálogos (Correspondencias,
   Juzgados, Municipios, Estados): mismo tratamiento, al 50% y centrado. */
.subenun #FiltroUsuarioInput,
.subenun #FiltroCorrespondenciaInput,
.subenun #FiltroJuzgadoInput,
.subenun #FiltroMunicipioInput,
.subenun #FiltroEstadoInput{
  display: block;
  width: 50%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/**------------------------*/

.subtit a b{
	transition: .5s all;
}
.subtit a:hover b{
	color: #235B4E;
}
.subenun{
	position: relative;
	margin-top: 15px;
	margin-bottom: 20px;
	padding: 0;
}
.subenun p{
	border-bottom: 2px solid #BB965C;
	position: relative;
	/*border-color: #BB965C;
	line-height: 1.2;*/
}
.subenun p span{ position:absolute; bottom:-5px; left:0;
}
.subenun span{
	display: block;
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 20px;
	height: 6px;
	background: #BB965C;
}

/* Filtro estilo AMPAROS (Usuarios, Bitácora): título sin la línea/span
   dorados propios de .subtit — usa <div class="na-divider"> aparte, igual
   que en Consulta de amparos. */
.subenun p.consulta-filtros__subtit{
	border-bottom: none;
	margin: 0 0 4px 18px;
}
/* .na-divider usa var(--na-oro), definida solo dentro de .consulta y los
   modales na-; fuera de ese scope la variable no resuelve, así que el
   navegador descarta la declaración ENTERA de border-bottom (no solo el
   color) — hay que fijar el shorthand completo, no solo border-bottom-color. */
.subenun .na-divider{
	border-bottom: 2px solid #BB965C;
}
.subenun .na-divider::before{
	background: #BB965C;
}
label.titForm{
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding-left: 15px;
}
label.titForm em{
	font-size: 12px;
	color: #9F804E;
}
label.titForm img{
	width: 18px;
	margin-right: 5px;
}
.form-control.form-login{
	border: 0;
	border-bottom: 3px solid;
	border-radius: 0;
	height: 30px;
	padding: 0 8px;
}
.form-control:focus.form-login{
	color: #235B4E;
}
.msg-alert{
	display:block;
	font-size: 12px;
	font-style: italic;
	font-weight: 600;
	line-height: 1;
	margin-top: 5px;
}
.alert-sec{
	display:block;
	font-size: 12px;
	font-style: italic;
	font-weight: 600;
	line-height: 1;
	margin-top: 5px;
}
/*BTN GRAL*/

/* Base (tamaño normal) */
.btnGral{
  /* Variables de tamaño */
  --btn-h: 42px;
  --btn-minw: 150px;
  --btn-border: 3px;
  --btn-radius: 10px;

  --btn-font: 12px;
  --btn-line: 40px;
  --btn-pad-left: 10px;

  --btn-icon-w: 48px;
  --btn-box-w: 30px;
  --btn-box-h: 40px;
  --btn-icon-size: 20px;

  position: relative;
  background: #fff;
  border: var(--btn-border) solid;
  border-radius: var(--btn-radius);
  min-width: var(--btn-minw);
  height: var(--btn-h);
  padding: 0;
  margin: 0 10px auto;
  transition: .25s ease;
}

.btnGral:disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}



.btnGral.btnGral--sm{
  min-width: 120px;
  height: 32px;
  border-width: 2px;
  border-radius: 8px;
}
.btnGral.btnGral--sm p{
  width: calc(100% - 38px);
  line-height: 30px;
  font-size: 12px;
  padding: 0 6px 0 8px;
}
.btnGral.btnGral--sm .btnIcon{
  width: 38px;
}
.btnGral.btnGral--sm .btnIcon .boxIcon{
  width: 22px;
  height: 30px;
  border-radius: 0 7px 7px 0;
}
.btnGral.btnGral--sm .btnIcon .boxIcon img{
  width: 15px;
  /* 11px = geometric center of the 22px box, pero el dibujo de AGREGAR.svg
     no está centrado dentro de su propio viewBox (el aro con abertura pesa
     más hacia la derecha), así que a simple vista el "+" se veía corrido.
     9px es el valor medido por píxeles (bbox + centroide de tinta) que sí
     centra el ícono visualmente dentro de la caja. */
  left: 7px;
}
.btnGral.btnGral--sm .btnIcon span{
  border-width: 15px 11px 15px 0px;
}
/* evita brincos por el scale del hover solo en la variante small */
.btnGral.btnGral--sm:hover{
  transform: none;
}

/**table card*/
/* ============ TABLE CARD (estilo como la imagen) ============ */
.tableCard{
  background: #fff;
  border-radius: 0;                 /* más redondeado */
  box-shadow: 0 10px 22px rgba(0,0,0,.14); /* sombra más suave */
  border: 1px solid rgba(0,0,0,.06);   /* borde ligero */
  overflow: hidden;                    /* recorta esquinas */
}

/* Quitar separación extra de bootstrap */
.tableCard .table{
  margin: 0;
  border-collapse: separate; /* ayuda con bordes y radios */
  border-spacing: 0;
}

/* El thead no pinta fondo; lo pintan los th */
.tableCard thead.table-head{
  background: transparent;
}

/* Encabezados */
.tableCard thead.table-head th{
  background: #005046;                 /* verde oscuro */
  color: #fff;
  border: 0;
  padding: 16px 18px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
  vertical-align: middle;
  white-space: nowrap;                 /* como la imagen */
  border-bottom: 3px solid #b88a3b;    /* línea dorada inferior */
}



/* Celdas */
.tableCard tbody td{
  padding: 12px 18px;
  border-top: 1px solid #e9e9e9;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
  color: #1f1f1f;
}

/* (Opcional) hover suave */
.tableCard tbody tr:hover{
  background: rgba(0, 80, 70, 0.04);
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 576px){
  .tableCard{
    border-radius: 20px;
  }
  .tableCard thead.table-head th{
    padding: 12px 12px;
    font-size: 11px;
  }
  .tableCard tbody td{
    padding: 10px 12px;
  }

  .tableCard thead.table-head th:first-child{
    border-top-left-radius: 20px;
  }
  .tableCard thead.table-head th:last-child{
    border-top-right-radius: 20px;
  }
}



/* Texto */
.btnGral p{
  width: calc(100% - var(--btn-icon-w));
  float: left;
  line-height: var(--btn-line);
  font-size: var(--btn-font);
  font-weight: 700;
  padding: 0 5px 0 var(--btn-pad-left);
  margin: 0;
}

/* Área derecha (icono) */
.btnGral .btnIcon{
  position: relative;
  width: var(--btn-icon-w);
  float: left;
  top: -1px;
  right: -1px;
}

.btnGral .btnIcon .boxIcon{
  position: relative;
  width: var(--btn-box-w);
  height: var(--btn-box-h);
  float: right;
  border-radius: 0 9px 9px 0;
  transition: .25s ease;
}

.btnGral .btnIcon .boxIcon img{
  z-index: 10;
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--btn-icon-size);
  left: 12px;
  top: 50%;
}

/* Triángulo */
.btnGral .btnIcon span{
  position: absolute;
  left: 5px;
  border-style: solid;
  border-width: calc(var(--btn-box-h)/2) 15px calc(var(--btn-box-h)/2) 0px;
  transform: rotate(0deg);
}

/* Colores triángulo (igual a tu CSS) */
.btnGral .btnIcon span.s-oro{    border-color: transparent #BB965C transparent transparent; transition: .25s ease; }
.btnGral .btnIcon span.s-verde{  border-color: transparent #235B4E transparent transparent; transition: .25s ease; }
.btnGral .btnIcon span.s-guinda{ border-color: transparent #9F1F41 transparent transparent; transition: .25s ease; }
.btnGral .btnIcon span.s-blanco{ border-color: transparent #fff transparent transparent;    transition: .25s ease; }
.btnGral .btnIcon span.s-gris{   border-color: transparent #d2d1d1 transparent transparent; transition: .25s ease; }
.btnGral .btnIcon span.s-verde_b{border-color: transparent #159d15 transparent transparent; transition: .25s ease; }
.btnGral .btnIcon span.s-rojo{   border-color: transparent #cc171e transparent transparent; transition: .25s ease; }


.btnGral:hover{
  transform: translateY(-1px);
  color: #681B33;
}
.btnGral:hover .btnIcon span{
  border-color: transparent #681B33 transparent transparent;
}
.btnGral:hover .boxIcon{
  background: #681B33 !important;
}


.btnGral.btnGral--sm{
  --btn-h: 32px;
  --btn-minw: 120px;
  --btn-border: 2px;
  --btn-radius: 8px;

  --btn-font: 12px;
  --btn-line: 30px;
  --btn-pad-left: 8px;

  --btn-icon-w: 38px;
  --btn-box-w: 22px;
  --btn-box-h: 30px;
  --btn-icon-size: 15px;
}

/* Opcional: si quieres que en small no “suba” en hover */
.btnGral.btnGral--sm:hover{
  transform: none;
}




/* BTN SECUNDARIO */
.btnSec {
	height: 40px;
	background: #bb965c;
	color: #fff;
	padding: 5px 10px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	transition: all .5s;
	margin-top: 5px;
}
.btnSec img{
	width: 20px;
	margin-left: 2px;
	transition: .5s all;
}
.btnSec i{
	font-size: 15px;
	margin-left: 2px;
	transition: .5s all;
}
.btnSec:hover{
	background: #691c32;
}
.btnSec:hover:focus{
	transform: scale(.85);
}
.btnSec:hover img, .btnSec:hover i{
	margin-left: 7px;
}
/*BOTONES CARGA Y DESCARGA*/
#btnCarga, #btnDescarga{
	position: relative;
	z-index: 0;
	width: calc(100% - 100px);
	max-width: 450px;
	min-width: 220px;
	margin-top: 5px;
	float: left;
}
#btnCargaBorrar{
	display: none;
	width: 100px;
	float: left;
	padding-left: 15px;
}
.docsLeft {
	position: relative;
	width: calc(100% - 110px);
	min-width: 110px;
	height: 40px;
	float: left;
	background: white;
	color: #4d4d4d;
	border: 2px solid;
	border-right: none;
	border-radius: 10px 0 0 10px;
	padding: 8px 15px;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 15px;
}
#btnCarga .docsLeft {
	border: 2px solid #005046;
}
#btnDescarga .docsLeft {
	border: 2px solid #BC955C;
}
#btnCarga .docsLeft.correcto {
	border: 2px solid #127c12;
}
.docsRight{
	position: relative;
	width: 110px;
	height: 40px;
	float: left;
	color: white;
	text-align: center;
	border-radius: 0 10px 10px 0;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.cargar {
	z-index: 1;
	overflow: hidden;
	display: inline-block;
	background: #005046;
	border: 2px solid #005046;
	transition: .5s background;
}
.cargado {
	z-index: 1;
	overflow: hidden;
	display: inline-block;
	background: #127c12;
	border: 2px solid #127c12;
	transition: .5s background;
}
.descargar {
	z-index: 1;
	overflow: hidden;
	display: inline-block;
	background: #BC955C;
	border: 2px solid #BC955C;
	transition: .5s background;
}
.cargar:hover, .descargar:hover{
	border: 2px solid #96663D;
}
.cargar::after, .descargar::after {
	content: "";
	background: #96663D; /* color de fondo hover */
	position: absolute;
	z-index: -1;
	padding: 16px 20px;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	transform: skewX(-45deg) scale(0, 1);
	transition: all 0.5s ease;
}
.cargar:hover::after, .descargar:hover::after{
	transition: all 0.3s ease-out;
	transform: skewX(-45deg) scale(1.5, 1.5);
}
.docsRight .input-file {
	position: absolute;
	width: 110px;
	top: 5px;
	left: 0;
	height: 30px;
	cursor: pointer;
	opacity: 0;
	z-index: 5;
}
.img_docs {
	width: 14px;
	margin: 4px 0px;
}
.cargado .img_docs {
	width: 17px;
	margin: 0;
}
/*BTN VALIDAR*/
.btnVal {
	width: 150px;
	height: 35px;
	background: #bb965c;
	color: #fff;
	padding: 5px 10px;
	margin-top: 5px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	transition: all .5s;
}
.btnVal:hover{
	background: #691c32;
}
.btnVal:hover:focus{
	transform: scale(.85);
}
.logo-gobmx{
	padding: 30px;
	text-align: center;
}
.logo-gobmx img{
	height: 70px;
}
.boxLogin{
	width: 90%;
	max-width: 380px;
	margin: auto;
	margin-bottom: 20px;
	border-radius: 37px;
	background: #fff;
	box-shadow: 0 0 10px #000000;
}
.headerBox{
	position: relative;
}
.headerBox img{
	width: 100%;
}
.headerBox h2{
	position: absolute;
	transform: translate(-50%, -50%);
	top: 70px;
	left: 50%;
}
.bodyBox{
	padding: 25px 30px 30px 30px;
}
.alert-not{
	display: block;
	background: red;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	color: #fff;
	border-radius: 30px;
	font-size: 12px;
	font-weight: 700;
}
.ubi-alert-menu{
	position: absolute;
	top: -7px;
	right: -7px;
}
.ubi-alert-submenu{
	position: absolute;
	top: 10px;
	right: 10px;
}
#btnRegresar .btnReg{
	transform: scale(.8);
	margin-right: -15px;
}
/* MENU	DERECHA*/
#menuDerecha{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 99;
}
.btnMenu{
	background: transparent;
	width: 50px;
	height: 50px;
	border-radius: 15px;
	color: #fff;
	transition: .5s all;
}
.btnMenu i{
	font-size: 30px;
	transition: .5s all;
}
.btnMenu:hover{
	box-shadow: 0 0 3px black;
}
.btnMenu:hover i{
	font-size: 25px;
}
#menuDerecha.dropstart .dropdown-toggle::before {
	display: none;
}
#menuDerecha .dropdown-menu{
	padding: 10px;
	width: 320px;
	min-height: 150px;
	box-shadow: 0 0 10px black;
}
#menuDerecha .item-menu{
	display: block;
	position: relative;
	cursor: pointer;
	white-space: nowrap;
	background: transparent;
	font-size: 16px;
	font-weight: 500;
	color: #235B4E;
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: left;
	border-bottom: 2px solid #00000050;
}
#menuDerecha .item-menu i{
	font-size: 20px;
	margin-right: 5px;
	color: #c39852;
}
#menuDerecha .item-menu:hover{
	font-weight: 700;
	border-bottom: 2px solid #BB965C;
}
#menuDerecha .item-menu:hover.rojo{
	font-weight: 700;
	color: #9F1F41;
	border-bottom: 2px solid #BB965C;
}
#menuDerecha .item-menu:hover.rojo i{
	color: #9F1F41;
}
/* PROCESO DE REGISTRO */
.boxGral{
	position: relative;
}
.pleca_pasos{
	width: 100%;
	position: relative;
	z-index: 11;
	background: linear-gradient(#235B4E, #10312B);
	padding: 20px;
	text-align: center;
	color: #fff;
	height: 110px;
	border-bottom: 10px solid #d2d1d1;
}
.pleca_pasos h6{
	margin-bottom: 1px;
}
.img-proceso{
	z-index: 5;
	width: 100%;
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	bottom: -30px;
	height: 45px;
}
.img-paso{
	width: 50px;
	margin: 0 6px;
	padding: 0px;
	border-radius: 50px;
}
.linea-avance{
	display: block;
	background: #BB965C;
	height: 11px;
	position: absolute;
	left: 0;
	bottom: -10px;
}
.linea-avance.p1{
	width: 24.5%;
}
.linea-avance.p2{
	width: 44%;
}
.linea-avance.p3{
	width: 61%;
}
.linea-avance.p4{
	width: 77%;
}
.linea-avance.p5{
	width: 100%;
}
.bodyForm{
	position: relative;
	top: 10px;
	padding: 30px 15px;
}
.limit-sec{
	width: 98%;
	margin: auto;
}
label.titLleno{
	position: relative;
	z-index: 10;
	left: 15px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #BB965C;
	background: #fff;
	padding: 0 5px;
}
.datLleno{
	position: relative;
	top: -12px;
	height: 40px;
	line-height: 40px;
	padding: 0 15px;
	width: 100%;
	background: #fff;
	color: #292929;
	border: 2px solid #BB965C;
	border-radius: 10px;
	font-weight: 600;
	font-size: 13px;
}
label.titLleno_v{
	position: relative;
	z-index: 10;
	left: 15px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	background: #fff;
	padding: 0 5px;
}
.datLleno_v{
	position: relative;
	top: -12px;
	min-height: 40px;
	line-height: 1.1;
	padding: 10px 15px;
	width: 100%;
	background: #fff;
	border: 3px solid;
	border-radius: 10px;
	font-weight: 700;
}
.datLleno:focus-visible{
	border: 3px solid #235B4E;
	box-shadow: 0 0 2px #235B4E;
}
label.titLleno:focus-visible .datLleno:focus-visible {
	color: #235B4E;
}
.form-control.form-basic, .form-select.form-basic, .form-basic {
	margin-top: 5px;
	border-radius: 10px;
	height: 40px;
	border: 2px solid #d2d1d1;
	font-weight: 600;
	font-size: 13px;
}
.form-control.form-basic, .form-basic {
	background: #F0F0F0;
}
.form-control:focus.form-basic, .form-basic:focus {
	background: #FFF;
	border-color: #235B4E;
}
.form-select.form-basic{
	background: #fff;
}
.form-check-label{
	font-size: 13px;
	font-weight: 700;
	color: #235B4E;
	padding: 8px 0 0 10px;
}
.form-check-input {
	width: 30px;
	height: 30px;
}
.form-check-input:checked {
	background-color: #235B4E;
	border-color: #235B4E;
}
.tipo-check .form-check{
	padding-left: 50px;
}
.caja-mapa{
	width: 100%;
	margin-top: 5px ;
	border: 2px solid #BB965C;
	border-radius: 10px;
}
.caja-mapa img{
	width: 100%;
	border-radius: 10px;
}
.btnCarga{
	position: relative;
	margin: auto;
	width: 100px;
	height: 100px;
	border-radius: 30px;
	padding: 20px;
	background: #BB965C;
}
.btnCarga .input-file {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 0;
	left: 0;
	cursor: pointer;
	opacity: 0;
	z-index: 5;
}
.tit-archivo{
	display: block;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 5px;
}
.tit-archivo img{
	width: 20px;
	margin-right: 5px;
}
.pleca_pasos h3{
	font-size: 20px;
	margin-top: 10px;
}
.pleca_pasos h3 img{
	width: 30px;
}
/* BTN SECUNDARIO */
.btnTer{
	position: relative;
	overflow: hidden;
	width: 85px;
	height: 35px;
	line-height: 35px;
	border-radius: 12px;
	color: #fff;
	font-weight: 600;
	transition: .8s background;
	top: 2px;
	margin-top: 5px;
}
.btnTer:hover, .btnTer:focus{
	cursor: pointer;
	background: #6F1228;
}
.btnTer i{
	font-size: 20px;
}
.btnTer:hover i, .btnTer:hover img{
	opacity: 0;
}
.btnTer:hover:before{
	opacity: 1;
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
}
.btnTer:before{
	content: attr(data-hover);
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
	line-height: 35px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	font-size: 12px;
	opacity: 0;
	-webkit-transform: translate(-100%,0);
	transform: translate(-100%,0);
	-webkit-transition: all .3s ease-in-out;
	transition: all .5s ease-in-out;
}
.btnAyuda{
	position: absolute;
	top: -3px;
	right: 0;
	width: 40px;
	height: 40px;
	border: 2px solid #BB965C;
	border-radius: 50%;
	padding: 5px;
	background: #fff;
	transition: .5s all;
}
.btnAyuda i{
	font-size: 25px;
	color: #BB965C;
	transition: .5s all;
}
.btnAyuda:hover{
	border: 2px solid #6F1228;
}
.btnAyuda:hover i{
	color: #6F1228;
}
.parra-modal{
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}
.box-doc{
	text-align: center;
	margin: 10px;
}
.img-doc-v{
	width: 120px;
}
.img-doc-h{
	height: 120px;
}
.check-w{
	width: 230px;
	margin: auto;
}
.bloquea{
	background: #454141cc;
	position: absolute;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: -10px;
	left: 0px;
	opacity: .7;
}
.imgPreviewImg{
	margin: auto;
	width: 200px;
}
.imgPreviewID{
	margin: auto;
	height: 150px;
}
.imgFoto{
	width: 100%;
	border-radius: 30px;
}
.imgID{
	height: 100%;
	border-radius: 30px;
}
ul.dat-contact{
	padding: 10px 0;
	border-bottom: 3px solid #bb965c;
}
.name-menu{
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: #235B4E;
}
.dat-menu{
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	color: #bb965c;
}
.logo-info{
	padding: 40px 30px;
}
.pleca-proc{
	background: #10312be0;
	padding: 20px 66px;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	font-size: 19px;
}
.pleca-docs{
	padding: 40px 10px;
}
.subtitSec{
	font-size: 15px;
	color: #fff;
	text-align: center;
	font-weight: 600;
	margin-bottom: 15px;
}
.pleca-docs p img{
	width: 15px;
	margin-right: 5px;
	margin-top: -5px;
}
.caja-docs{
	box-shadow: 0 0 5px #000;
	background: #235B4E;
	border-radius: 20px;
	padding: 15px 0;
}
.caja-ind{
	padding: 5px;
	text-align: center;
	border-right: 2px solid #ddc9a578;
}
.caja-ind.sin{
	border-right: none;
}
.caja-ind img{
	width: 40px;
	margin-bottom: 5px;
}
.caja-ind p{
	font-weight: 500;
	font-size: 10px;
	line-height: 1.1;
	margin-bottom: 0;
}
.caja-ind p.oro_t{
	font-weight: 600;
}
.foot-docs{
	background: #235B4E;
	padding: 20px;
	text-align: center;
	font-weight: 600;
	color: #fff;
	width: 100%;
}
.footbtnMovil{
	display: block;
	text-align: center;
	line-height: 1.2;
	font-weight: 700;
	width: 100%;
	height: 50px;
	padding: 8px;
}
.iconFoot{
	width: 20px;
}
.ubiBtn{
	width: 300px;
	height: 60px;
	margin: auto;
	margin-top: 60px;
	margin-bottom: 30px;
}
.ubiBtn a{
	display: flex;
	margin-top: 7.5px;
}
#inicia-ahora.btnGral{
	background: transparent;
	margin-top: 0;
	min-width: 285px;
}
#inicia-ahora.btnGral:hover{
	transform: none;
	color: #BB965C;
}
#inicia-ahora.btnGral:hover .boxIcon {
	background: #BB965C !important;
}
#inicia-ahora.btnGral:hover .btnIcon span {
	border-color: transparent #BB965C transparent transparent;
}
.head-noti{
	width: 100%;
	height: 80px;
	padding: 20px 30px;
	background: #fff;
	border-bottom: 5px solid #BB965C;
}
.icon-noti{
	width: 40px;
	height: 40px;
	padding: 0 10px 0 0;
	float: left;
}
.dat-noti{
	width:calc(100% - 40px);
	float: left;
}
.dat-noti h5{
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 0;
	line-height: 1.1;
}
.dat-noti p{
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 0;
	line-height: 1.1;
}
.btn-noti{
	display: block;
	height: 50px;
	padding: 0;
	padding-left: 10px; 
}
.icon-msg{
	width: 50px;
	height: 50px;
	float: left;
	padding: 15px;
}
.icon-msg i{
	font-size: 20px;
}
.icon-msg .cerrado{
	color: #235B4E;
}
.icon-msg .abierto{
	color: #BB965C;
}
.dat-msg{
	width:calc(100% - 50px);
	float: left;
	padding: 10px 5px;
}
.tit-msg{
	font-size: 13px;
	margin-bottom: 0;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tit-msg.cerrado{
	font-weight: 700;
	color: #235B4E;
}
.tit-msg.abierto{
	font-weight: 500;
	color: #BB965C;
}
.fecha-msg{
	font-size: 10px;
	font-weight: 500;
	margin-bottom: 0;
	line-height: 1.1;
}
.encabezado-msg{
	display: block;
	background: #fff;
	padding: 10px 15px;
	border-radius: 5px;
	box-shadow: 0 0 3px grey;
	margin-bottom: 10px;
}
.titEnca{
	width: 100%;
	font-size: 13px;
	font-weight: 700;
}
.fechaEnca{
	width: 100%;
	font-size: 10px;
	line-height: 1.1;
	font-weight: 600;
	color: #7f7f7f;
}
.cuerpo-msg{
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 3px grey;
	padding: 15px;
}
.aviso-img{
	margin: auto;
	text-align: center;
}
.aviso-img img{
	width: 600px;
	max-width: 100%;
}
.aviso-text{
	width: 95%;
	margin: auto;
}
.caja-text{
	padding: 10px 0px;
}
.caja-text h5{
	font-size: 13px;
	font-weight: 700;
}
.caja-text p{
	font-size: 11px;
	line-height: 1.1;
	font-weight: 500;
	text-align: justify;
	margin-bottom: 10px;
}
#btnRegresar{
	margin-top: 5px;
	text-align: right;
	display: none;
}
/*medias*/
@media all and (min-width:420px){
	.img-paso {
	    width: 62px;
	    height: 50px;
	}
	.img-proceso {
	    bottom: -23px;
	}
	.linea-avance.p3{
		width: 60%;
	}
	.linea-avance.p4{
		width: 73%;
	}
}
@media all and (min-width:576px){
	.linea-avance.p1{
		width: 33%;
	}
	.linea-avance.p2{
		width: 43%;
	}
	.linea-avance.p3{
		width: 57%;
	}
	.linea-avance.p4{
		width: 67%;
	}
	.ubiBtn{
		display: none;
	}
	.foot-docs {
	    bottom: 0;
	}
	.pleca-docs {
	    padding: 40px;
	}
	#boxInfo {
		height: auto;
	}
	.foot-docs {
		position: relative;
	}
}
@media all and (min-width:768px){
	.banner_web{
		display: block;
		height: 150px;
		margin: auto;
	}
	.banner_movil{
		display: none;
	}
	.limitForm {
	    width: 75%;
	    margin: auto;
	    padding: 20px 0px;
	}
	a.btnCURP {
	    height: 35px;
	    line-height: 25px;
	}
	.msg-alert {
	    font-size: 13px;
	    margin-top: 0;
	}
	.caja-mapa {
	    width: 80%;
	}
	.linea-avance.p1 {
	    width: 37%;
	}
	.linea-avance.p3{
		width: 56%;
	}
	.linea-avance.p4{
		width: 63%;
	}
	#modalDocumentos .modal-dialog{
		max-width: 95%;
	}
	.box-doc {
	    margin: 15px 0;
	}
	.subtit{
		font-size: 13px;
		line-height: 1.2;
	}
	.mh-30{
		margin-bottom: 30vh;
	}
	.img-doc-v{
		width: 130px;
	}
	.img-doc-h{
		height: 130px;
	}
	.aviso-text {
	    width: 80%;
	    margin: auto;
	}
	.btnMenu i {
	    font-size: 40px;
	}
	#menuDerecha {
	    top: 20px;
	    right: 20px;
	}
	.cabezalGral{
	    height: 100px;
	    padding: 15px;
		border-bottom: 10px solid #BB965C;
	}
	.banner{
		height: 60px;
	}
	#bandejaGral{
		height: calc(100vh - 160px);
	}
	#bandejaBody{
		overflow-y: scroll;
		height: calc(100vh - 160px);
	}
	#bandejaGral #barrido-bandeja{
		height: calc(100% - 80px);
	    overflow-y: scroll;
	    overflow-x: hidden;
	}
	.icon-msg i {
	    font-size: 20px;
	}
	.tit-msg {
    	font-size: 13px;
    }
    .fecha-msg {
    	font-size: 10px;
    }
    .caja-text{
		padding: 15px 30px;
	}
	.caja-text h5{
		font-size: 18px;
	}
	.caja-text p{
		font-size: 13px;
	}
	.encabezado-msg{
	    padding: 10px 15px;
	}
	.encabezado-msg {
	    display: flex;
	}
	.titEnca {
	    width: calc(100% - 160px);
	    float: left;
	    font-size: 15px;
	}
	.fechaEnca {
	    width: 160px;
	    float: left;
	    font-size: 12px;
	    line-height: 22px;
	}
	#bandejaBody {
	    padding: 20px;
	}
}
@media all and (min-width:992px){
	.limitForm {
	    width: 80%;
	}
	.caja-mapa {
	    width: 65%;
	    margin: auto;
	    margin-top: 5px;
	}
	label.l-mapa{
		text-align: center;
	}
	.bodyForm{
		width: 85%;
		margin: auto;
	}
	#modalDocumentos .modal-dialog{
		max-width: 75%;
	}
	.cnt_login {
	    top: 55%;
	}
	#boxInfo{
		width: 505px;
		float: left;
		height: calc(100vh - 58px);
	}
	#boxCont{
		width: calc(100% - 505px);
		float: left;
	}
	.logo-info{
		padding: 50px 30px;
	}
	.pleca-proc{
	    padding: 20px 105px;
	}
	.label-ghost{
		display: block;
	}
}
@media all and (min-width:1024px){
	.linea-avance.p1{
		width: 41%;
	}
	.linea-avance.p2{
		width: 48%;
	}
	.linea-avance.p3{
		width: 52%;
	}
	.linea-avance.p4{
		width: 58%;
	}
}
/*ALERTA*/
.alertGral{
	max-width: 550px;
    height: 70px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 5px black;
    margin: 10px auto;
    padding: 0;
}
.al-left{
	position: relative;
    width: 60px;
    height: 70px;
    float: left;
    padding: 12.5px 10px;
    border-radius: 10px 13px 40px 10px;
}
.al-left img{
	position: absolute;
    transform: translate(-50%, -50%);
    top: 45%;
    left: 50%;
    width: 40px;
}
.al-right{
    width: calc(100% - 60px);
    height: 70px;
    float: left;
    padding: 10px 20px;
}
.al-right .tit{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}
.al-right .subtit{
    font-size: 13px;
    font-weight: 600;
    text-align: justify;
    line-height: 1.1;
}
.al-right .subtit.cnt{
	width: 90%;
    font-size: 14px;
}
.al-right.pr .btnAct{
	position: absolute;
    right: 20px;
    transform: translateY(-50%);
    top: 50%;
}
.tit-exito{
	width: 100%;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}
img.icon-exito{
	width: 35px;
	padding-top: 2px;
}
.titHead{
	margin: auto;
    padding: 10px 15px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
}
.titAviso{
	font-size: 20px;
	text-align: center;
	font-weight: 500;
	margin-bottom: 0px;
}
.titAviso.oro_t{
	margin-bottom: 10px;
}
.subenunbis {
    position: relative;
    margin-bottom: 20px;
}
.subenunbis .subtit {
    font-size: 12px;
}
.subenunbis p {
    text-align: right;
    border-bottom: 2px solid;
}
.subenunbis span {
    display: block;
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 30%;
    height: 6px;
}
.btn-ps{
    position: relative;
    margin: 20px;
    text-align: center;
}
.btnFoto{
	position: absolute;
    transform: translateX(-50%);
    bottom: 10px;
    left: 50%;
    border: 3px solid #fff;
    border-radius: 30px;
    background: transparent;
    padding: 5px;
    box-shadow: 0 0 5px black;
    transition: .5s all;
}
.btnText{
    background: #fff;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 700;
    color: #9F1F41;
    border-radius: 30px;
    box-shadow: 0 0 5px black;
    transition: .5s all;
}
.i-captura {
    width: 22px;
    height: 22px;
    mask: url(../img/CAMARA.svg) no-repeat;
    float: left;
    background: #9f2241;
    transition: .5s all;
    margin-right: 5px;
}
.btnFoto:focus:hover{
	transform: translateX(-50%) scale(.95);
	border: 3px solid #9f2241;
}
.btnFoto:focus:hover .btnText{
	background: #9f2241;
	color: #fff;
}
.btnFoto:focus:hover .i-captura{
	background: #fff;
}
.btnIr{
	background: #235B4E;
	color: #fff;
	border: none;
	position: relative;
	width: 180px;
	height: 45px;
	font-size: 18px;
	padding: 0 20px;
	cursor: pointer;
	transition: 800ms ease all;
	outline: none;
	border-radius: 15px 0 15px 0;
	outline:none;
}
.btnIr:hover{
	background:#fff;
	color: #235B4E;
}
.btnIr:before,.btnIr:after{
	content:"";
	position:absolute;
	top:0;
	right:0;
	height:2px;
	width:0;
	background:  #235B4E;
	transition:400ms ease all;
}
.btnIr:after{
	right:inherit;
	top:inherit;
	left:0;
	bottom:0;
}
.btnIr:hover:before,.btnIr:hover:after{
	width:100%;
	transition:800ms ease all;
}
.btnIr p{
	position: relative;
}
.btnIr i{
	width: 20px;
	position: absolute;
	transform: translateY(-50%);
	top: 0;
	left: 0;
	transition: 400ms ease all;
}
.btnIr span{
	position: absolute;
	display: block;
	width: calc(100% - 20px);
	transform: translateY(-50%);
	top: 0;
	right: 0;
	transition: 400ms ease all;
}
.btnIr:hover span{
	right: 15%;
}
.btnIr:hover i{
	left: 90%;
}
.subtit a{
	font-weight: 700;
	transition: .3s all;
}
.subtit a:hover{
	color: #9D2449;
}
.bloquea_2{
	width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    z-index: 20;
    top: 0;
}
.bloquea_3{
	width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    z-index: 20;
    top: 0;
}
.borde-izq{
	width: calc(50% - 5px);
	height: 5px;
	float: left;
}
.borde-izq .diagonal{
    position: absolute;
	width: 5px;
	height: 5px;
    bottom: 0;
    right: -5px;
    border-bottom: 5px solid;
    border-right: 5px solid transparent;
}
.borde-der{
	width: calc(50% - -5px);
	height: 5px;
	float: right;
}
.img-check{
	width: 90px;
	margin: 15px;
}
.subConfirma{
	margin: 20px 0;
}
.subConfirma p{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
    margin-bottom: 15px;
}
.secTit{
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 2px;
	margin-top: 5px;
	color: #4D4D4D;
}
@media (max-width: 768px) and (min-width:576px){
	.alertGral {
		min-width: initial;
	}
	.alertGral.bis, .alertGral.bis .al-left, .alertGral.bis .al-right {
		height: 85px;
	}
}
@media all and (max-width: 576px){
	.limitForm{
		width: 95%;
		padding: 25px 10px;
	}
	a.nav-link.registro .p-registro, a.nav-link.sesion .p-sesion {
    	font-size: 14px;
	}
	a.nav-link.sesion .label-sesion {
	    font-size: 10px;
	}
	.label-ghost {
	    display: none;
	}
	#form-prerregistro .tab-content {
	    padding: 15px 10px;
	}
	.subtit {
	    font-size: 12px;
	    line-height: 1.2;
	}
	#form-prerregistro .tab-content-bis {
	    padding: 20px 0;
	}
	#form-prerregistro .container, #form-prerregistro .container-fluid, #form-prerregistro .container-lg, #form-prerregistro .container-md, #form-prerregistro .container-sm, #form-prerregistro .container-xl, #form-prerregistro .container-xxl {
	    padding-right: 0;
	    padding-left: 0;
	}
	.bodyBox {
	    padding: 25px 10px 30px 10px;
	}
	.pleca-proc {
	    padding: 20px 60px;
	    font-size: 15px;
	}
	.pleca-docs {
	    padding: 25px 10px;
	}
	a.btnCURP {
	    padding: 10px 5px;
	}
	.boxConfirma {
    	width: 95%;
    	margin-top: 30px;
    }
    .boxConfirma h5{
    	font-size: 15px;
    }
    .subConfirma p {
	    font-size: 14px;
	}
	.btnTer {
		width: 65px;
	}
	.btnTer:before {
		font-size: 10px;
	}
	#btnCargaBorrar {
		width: 65px;
		padding-left: 10px;
	}
	#btnCarga, #btnDescarga {
		width: calc(100% - 65px);
	}
	.ghost {
		display: none !important;
	}
	.tit-exito {
		font-size: 16px;
		line-height: 1.1;
	}
	.alertGral {
	    min-width: 100%;
	}
	.alertGral.bis {
		height: 100px;
	}
	.al-right .tit {
	    font-size: 13.5px;
	}
	.al-right .subtit {
	    font-size: 12px;
	}
	.btnGral, .btnReg, .btnSec{
		transform: scale(.85);
	}
}
.secTit{
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 2px;
	margin-top: 5px;
	color: #4D4D4D;
}
.jconfirm .jconfirm-box.jconfirm-type-blue {
	border-top: solid 7px #004750 !important;
	-webkit-animation-name: type-blue;
	animation-name: type-blue;
}
.jconfirm .jconfirm-box.jconfirm-type-blue .jconfirm-title-c .jconfirm-icon-c {
	color: #004750 !important;
}
.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c i {
	vertical-align: middle;
	color: #004750;
}
@media (min-width: 1400px) {
	.al-right .subtit {
		font-size: 15px;
	}
}
.blockscreen {
	z-index: 9999;
	position: fixed;
	/*Important to cover the screen in case of scolling content*/
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	background: rgba(2, 47, 20, 0.25);
  }
.textBlockScreen {
	color: #bb965c;
  }


  /**nuevo*/

  
/* ----- Título principal ----- */
.title{
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;

/* clave para que el subrayado mida lo mismo que el texto */
  display: inline-block;
  position: relative;
  padding-bottom: 10px; /* espacio para la línea */
}

/* palabra en verde y más fuerte */
.title .accent{
  font-weight: 700;
  color: var(--verde, #235B4E); /* ajusta al verde de tu tema */
}

/* subrayado bicolor */
.title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 4px;
  border-radius: 2px;

  /* división del color (ajusta el 60/40 según te guste) */
  background: linear-gradient(
    to right,
    var(--oro, #BB965C) 0%,
    var(--oro, #BB965C) 60%,
    var(--verde, #235B4E) 60%,
    var(--verde, #235B4E) 100%
  );
}

/* ============================================================
   VF-83: utilidades que reemplazan atributos style="" inline, para
   poder quitar 'unsafe-inline' de style-src-attr en la CSP (ver
   app.js). Deliberadamente SIN !important: varias marcan el estado
   INICIAL de elementos que JS alterna después vía
   element.style.propiedad = valor (p.ej. consultaAmparosEditarModal
   Acciones.ejs mostrando/ocultando botones de documento) -- un
   estilo puesto por JS directamente en el elemento siempre gana
   sobre una regla de clase sin !important, así que el toggle sigue
   funcionando exactamente igual que con el style="" original.
   ============================================================ */
.na-hidden          { display: none; }
.na-block           { display: block; }
.na-flex-gap8       { display: flex; gap: 8px; align-items: center; }
.na-cursor-default  { cursor: default; }
.na-resize-vertical { resize: vertical; }
.na-text-left       { text-align: left; }
.na-w-100           { width: 100%; }
.na-unset-size      { width: unset; display: unset; }

/* Ícono de "tabla vacía"/"cargando" en los <td> de estado de las tablas de
   consulta y seguimiento -- repetido igual en varios de esos archivos. */
.na-empty-icon      { display: block; margin-bottom: 8px; font-size: 36px; color: #ccc; }
.na-empty-icon--sm  { display: block; margin-bottom: 8px; font-size: 32px; color: #ccc; }
.na-loading-icon    { display: block; margin-bottom: 8px; font-size: 24px; color: #235B4E; }

/* Textos pequeños de ayuda/etiqueta (modal TEST EMAIL, sólo desarrollo). */
.na-fs-11           { font-size: 11px; font-weight: 400; }
.na-fs-13           { font-size: 13px; }
.na-mb-10           { margin-bottom: 10px; }
.na-overflow-hidden { overflow: hidden; }
.na-margin-auto     { margin: auto; }
.na-block-justify-center { display: block; justify-content: center; }
.na-max-w-90        { max-width: 90%; }
.na-pt-20pct        { padding-top: 20%; }

/* Texto de versión de la app: debajo del botón "INGRESAR" en el login
   (en flujo, centrado) y en la esquina inferior derecha de cada sección
   INICIO (administrador/capturista/revisor comparten dashboard/inicio.ejs,
   así que un solo bloque cubre los 3 roles). */
.app-version {
  font-size: 12px;
  color: #888;
}
.app-version--corner {
  /* fixed (no absolute): #contGral.dash-wrap tiene min-height:100vh, así
     que un bottom:0 en absolute quedaba fuera de la pantalla visible sin
     hacer scroll -- fixed lo deja siempre anclado a la esquina inferior
     derecha de la ventana, sobre el panel derecho (el menú vive aparte, a
     la izquierda, así que no lo tapa). */
  position: fixed;
  right: 18px;
  bottom: 12px;
  z-index: 5;
}