/* ==================== 
	* CONFIGURACION *
==================== */

*,
*::after,
*::before {
    box-sizing: border-box;
}

:root {
  --srs-color-primario: #D9912F;
	--srs-color-secundario: #5d5c5c;
	--srs-color-terciario: #ffffff;
	--srs-color-cuaternario: #000000;
	--srs-color-quinario: #137d86;
	--srs-color-seenario: #2C3E50;


	--srs-color-secundario-tr: rgb(92, 92, 92, 0.9);



		/* Senario (relativo al seis)

		Septenario (relativo al siete)

		Octonario (relativo al ocho)

		Nonario (relativo al nueve) */


		
  --srs-color-red: #C1121F;
  --srs-color-red-focus: #C1121F60;
  --srs-color-disabled: #F4EFE6;
  --srs-color-text-disabled: #2c2c2c;
  --srs-color-border: #e2e3e5;
  --srs-color-white: #ffffff;
  --srs-color-black: #000000;
  --srs-color-gray: #131313;
  --srs-color-gray-light: #f4f4f4;
  
}

/* ====================
	* CONTENEDORES *
==================== */

.contenedor {
    width: 90%;
    margin: 20px auto;
    /*overflow: hidden;*/
    padding-left: 0px;
    padding-right: 0px
}

.contenedor-ancho {
    width: 100%;
    padding: 0 40px;
    margin: 20px auto;
}

.contenedor-super-ancho {
    width: 100%;
    padding: 0 15px;
    /* margin: 20px auto; */
}

.contenedor-flex{
	/* Habilita el modelo Flexbox */
  display: flex;

  /* Opcional: Para controlar la alineación y el espaciado */
  /*justify-content: space-between;  Distribuye el espacio entre los elementos */
  /*align-items: center;  Alinea los elementos verticalmente */
}

.tarjeta {
    padding: 5px;
    background: #d8d8d8;
    border-radius: 3px;
    box-shadow: 0px 0px 30px rgba(221, 221, 211, 0.3);
}


/* ====================
	* TTITULOS *
==================== */

.titulo-grande-1 {
    font-weight: 700;
    font-size: 64px;
}

.titulo-grande-2 {
    font-weight: 700;
    font-size: 54px;
}

.titulo-grande-3 {
    font-weight: 700;
    font-size: 44px;
}

.titulo-grande-4 {
    font-weight: 700;
    font-size: 34px;
}


/* ====================
	* GRID *
==================== */

.grid {
    display: grid;
    /*gap: 10px;*/
    grid-row-gap:15px;
    grid-column-gap:10px;
}

/* Tamaño Grande - Computadoras y TV */
.columna-1 { grid-template-columns: repeat(1, 1fr); }
.columna-2 { grid-template-columns: repeat(2, 1fr); }
.columna-3 { grid-template-columns: repeat(3, 1fr); }
.columna-4 { grid-template-columns: repeat(4, 1fr); }
.columna-5 { grid-template-columns: repeat(5, 1fr); }
.columna-6 { grid-template-columns: repeat(6, 1fr); }
.columna-7 { grid-template-columns: repeat(7, 1fr); }
.columna-8 { grid-template-columns: repeat(8, 1fr); }
.columna-9 { grid-template-columns: repeat(9, 1fr); }
.columna-10 { grid-template-columns: repeat(10, 1fr); }
.columna-11 { grid-template-columns: repeat(11, 1fr); }
.columna-12 { grid-template-columns: repeat(12, 1fr); }
.columna-13 { grid-template-columns: repeat(13, 1fr); }
.columna-14 { grid-template-columns: repeat(14, 1fr); }
.columna-15 { grid-template-columns: repeat(15, 1fr); }
.columna-16 { grid-template-columns: repeat(16, 1fr); }

.span-0 { display: none; }
.span-1 { grid-column: span 1;display:inline-block; }
.span-2 { grid-column: span 2;display:inline-block; }
.span-3 { grid-column: span 3;display:inline-block; }
.span-4 { grid-column: span 4;display:inline-block; }
.span-5 { grid-column: span 5;display:inline-block; }
.span-6 { grid-column: span 6;display:inline-block; }
.span-7 { grid-column: span 7;display:inline-block; }
.span-8 { grid-column: span 8;display:inline-block; }
.span-9 { grid-column: span 9;display:inline-block; }
.span-10 { grid-column: span 10;display:inline-block; }
.span-11 { grid-column: span 11;display:inline-block; }
.span-12 { grid-column: span 12;display:inline-block; }
.span-13 { grid-column: span 13;display:inline-block; }
.span-14 { grid-column: span 14;display:inline-block; }
.span-15 { grid-column: span 15;display:inline-block; }
.span-16 { grid-column: span 16;display:inline-block; }


/* Tamaño grande - PC por encima de hd */
@media screen and (max-width: 1300px) {
  .xl-columna-1 { grid-template-columns: repeat(1, 1fr); }
  .xl-columna-2 { grid-template-columns: repeat(2, 1fr); }
  .xl-columna-3 { grid-template-columns: repeat(3, 1fr); }
  .xl-columna-4 { grid-template-columns: repeat(4, 1fr); }
  .xl-columna-5 { grid-template-columns: repeat(5, 1fr); }
  .xl-columna-6 { grid-template-columns: repeat(6, 1fr); }
  .xl-columna-7 { grid-template-columns: repeat(7, 1fr); }
  .xl-columna-8 { grid-template-columns: repeat(8, 1fr); }
  .xl-columna-9 { grid-template-columns: repeat(9, 1fr); }
  .xl-columna-10 { grid-template-columns: repeat(10, 1fr); }
  .xl-columna-11 { grid-template-columns: repeat(11, 1fr); }
  .xl-columna-12 { grid-template-columns: repeat(12, 1fr); }
  .xl-columna-13 { grid-template-columns: repeat(13, 1fr); }
  .xl-columna-14 { grid-template-columns: repeat(14, 1fr); }
  .xl-columna-15 { grid-template-columns: repeat(15, 1fr); }
	.xl-columna-16 { grid-template-columns: repeat(16, 1fr); }
  
  .xl-span-0 { display: none;}
  .xl-span-1 { grid-column: span 1;display:inline-block; }
  .xl-span-2 { grid-column: span 2;display:inline-block; }
  .xl-span-3 { grid-column: span 3;display:inline-block; }
  .xl-span-4 { grid-column: span 4;display:inline-block; }
  .xl-span-5 { grid-column: span 5;display:inline-block; }
  .xl-span-6 { grid-column: span 6;display:inline-block; }
  .xl-span-7 { grid-column: span 7;display:inline-block; }
  .xl-span-8 { grid-column: span 8;display:inline-block; }
  .xl-span-9 { grid-column: span 9;display:inline-block; }
  .xl-span-10 { grid-column: span 10;display:inline-block; }
  .xl-span-11 { grid-column: span 11;display:inline-block; }
  .xl-span-12 { grid-column: span 12;display:inline-block; }
  .xl-span-13 { grid-column: span 13;display:inline-block; }
  .xl-span-14 { grid-column: span 14;display:inline-block; }
  .xl-span-15 { grid-column: span 15;display:inline-block; }
	.xl-span-16 { grid-column: span 16;display:inline-block; }
	
}

/* Tamaño Mediano - Tablets */
@media screen and (max-width: 768px) {
  .med-columna-1 { grid-template-columns: repeat(1, 1fr); }
  .med-columna-2 { grid-template-columns: repeat(2, 1fr); }
  .med-columna-3 { grid-template-columns: repeat(3, 1fr); }
  .med-columna-4 { grid-template-columns: repeat(4, 1fr); }
  .med-columna-5 { grid-template-columns: repeat(5, 1fr); }
  .med-columna-6 { grid-template-columns: repeat(6, 1fr); }
  .med-columna-7 { grid-template-columns: repeat(7, 1fr); }
  .med-columna-8 { grid-template-columns: repeat(8, 1fr); }
  .med-columna-9 { grid-template-columns: repeat(9, 1fr); }
  .med-columna-10 { grid-template-columns: repeat(10, 1fr); }
  .med-columna-11 { grid-template-columns: repeat(11, 1fr); }
  .med-columna-12 { grid-template-columns: repeat(12, 1fr); }
  .med-columna-13 { grid-template-columns: repeat(13, 1fr); }
  .med-columna-14 { grid-template-columns: repeat(14, 1fr); }
  .med-columna-15 { grid-template-columns: repeat(15, 1fr); }
	.med-columna-16 { grid-template-columns: repeat(16, 1fr); }
  
  .med-span-0 { display: none;}
  .med-span-1 { grid-column: span 1;display:inline-block; }
  .med-span-2 { grid-column: span 2;display:inline-block; }
  .med-span-3 { grid-column: span 3;display:inline-block; }
  .med-span-4 { grid-column: span 4;display:inline-block; }
  .med-span-5 { grid-column: span 5;display:inline-block; }
  .med-span-6 { grid-column: span 6;display:inline-block; }
  .med-span-7 { grid-column: span 7;display:inline-block; }
  .med-span-8 { grid-column: span 8;display:inline-block; }
  .med-span-9 { grid-column: span 9;display:inline-block; }
  .med-span-10 { grid-column: span 10;display:inline-block; }
  .med-span-11 { grid-column: span 11;display:inline-block; }
  .med-span-12 { grid-column: span 12;display:inline-block; }
  .med-span-13 { grid-column: span 13;display:inline-block; }
  .med-span-14 { grid-column: span 14;display:inline-block; }
  .med-span-15 { grid-column: span 15;display:inline-block; }
	.med-span-16 { grid-column: span 16;display:inline-block; }
	
}

/* Tamaño Pequeño - Celulares */
@media screen and (max-width: 480px) {
  .peq-columna-1 { grid-template-columns: repeat(1, 1fr); }
  .peq-columna-2 { grid-template-columns: repeat(2, 1fr); }
  .peq-columna-3 { grid-template-columns: repeat(3, 1fr); }
  .peq-columna-4 { grid-template-columns: repeat(4, 1fr); }
  .peq-columna-5 { grid-template-columns: repeat(5, 1fr); }
  .peq-columna-6 { grid-template-columns: repeat(6, 1fr); }
  .peq-columna-7 { grid-template-columns: repeat(7, 1fr); }
  .peq-columna-8 { grid-template-columns: repeat(8, 1fr); }
  .peq-columna-9 { grid-template-columns: repeat(9, 1fr); }
  .peq-columna-10 { grid-template-columns: repeat(10, 1fr); }
  .peq-columna-11 { grid-template-columns: repeat(11, 1fr); }
  .peq-columna-12 { grid-template-columns: repeat(12, 1fr); }
  .peq-columna-13 { grid-template-columns: repeat(13, 1fr); }
  .peq-columna-14 { grid-template-columns: repeat(14, 1fr); }
  .peq-columna-15 { grid-template-columns: repeat(15, 1fr); }
	.peq-columna-16 { grid-template-columns: repeat(16, 1fr); }
  
  .peq-span-0 { display: none; }
  .peq-span-1 { grid-column: span 1;display:inline-block; }
  .peq-span-2 { grid-column: span 2;display:inline-block; }
  .peq-span-3 { grid-column: span 3;display:inline-block; }
  .peq-span-4 { grid-column: span 4;display:inline-block; }
  .peq-span-5 { grid-column: span 5;display:inline-block; }
  .peq-span-6 { grid-column: span 6;display:inline-block; }
  .peq-span-7 { grid-column: span 7;display:inline-block; }
  .peq-span-8 { grid-column: span 8;display:inline-block; }
  .peq-span-9 { grid-column: span 9;display:inline-block; }
  .peq-span-10 { grid-column: span 10;display:inline-block; }
  .peq-span-11 { grid-column: span 11;display:inline-block; }
  .peq-span-12 { grid-column: span 12;display:inline-block; }
  .peq-span-13 { grid-column: span 13;display:inline-block; }
  .peq-span-14 { grid-column: span 14;display:inline-block; }
  .peq-span-15 { grid-column: span 15;display:inline-block; }
	.peq-span-16 { grid-column: span 16;display:inline-block; }
}


/* ====================
	* HELPERS *
==================== */
.no-margen { margin: 0 }
.no-margen-superior { margin-top: 0 }
.no-margen-inferior { margin-bottom: 0 }
.no-margen-izquierdo { margin-left: 0 }
.no-margen-derecho { margin-right: 0 }

.margen-inferior {margin-bottom: 20px;}
.margen-superior {margin-top: 20px;}

.texto-centrado {text-align: center;}
.texto-izquierda {text-align: left;}
.texto-derecha {text-align: right;}

.borde-div{
  border-width: thin;
  border-color: #000000;
  border-style: solid;
}

.borde-div-g{
  border-width: thin;
  border-color: #d8d8d8;
  border-style: solid;
}

.div-form{
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 4px;
	border-radius: 5px;
}	

.campo-sm {

  display:block;
  width:100%;
  height: 28px;
  padding: 3px 3px;
  line-height:1.8;
  border:1px solid #ced4da;
  border-radius:.25rem;
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out

}

.campo-xs {

    display:block;
    width:100%;
    height: 23px;
    padding: 0px 3px;
    line-height:1.8;
    border:1px solid #ced4da;
    border-radius:.25rem;
    transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out
    
  }
    
.campo-sm:focus {
  color:#495057; 
  background-color:#fff; 
  border-color:#80bdff; 
  outline:0;
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25)
}

.campo-xs:focus {
  color:#495057; 
  background-color:#fff; 
  border-color:#80bdff; 
  outline:0;
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25)
}

.txtarea {
  overflow:auto;
  resize:vertical;
  display:block;
  width:100%;
  line-height:1.2;
  padding: 3px 3px;
  border:1px solid #ced4da;
  border-radius:.25rem;
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.txtarea:focus {
  color:#495057; 
  background-color:#fff; 
  border-color:#80bdff; 
  outline:0;
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25)
}

.campo-sm[readonly], .campo-xs[readonly], .txtarea[readonly]{
	background-color:#f5f5f5;opacity:1
}
.campo-sm:disabled, .campo-xs:disabled, .txtarea:disabled{
	background-color:#f5f5f5;opacity:1
}

.width-100{
	width:100%; /*!important */
}

.tarjeta-db{
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	overflow: hidden;
	border: 3px solid var(--srs-color-secundario);
}

.tarjeta-db-inf{
	display: flex;
  align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	flex:1;
	background-color:var(--srs-color-primario);
	color: var(--srs-color-terciario);
}

.tarjeta-db-sup{
	display: flex;
  align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	flex:1;
	background-color:var(--srs-color-secundario);
	color: var(--srs-color-terciario);
}


/* ====================
	* TAGS *
==================== */


.tag-container {
  border: 1px solid #ccc;
  padding: 5px;    
  border-radius: 5px;



}

.tag-container .tag {

  font-size: 12px;
  padding: 1px;
  border: 1px solid #ccc;
  margin-right: 5px;
  display: inline-block;
  align-items: center;
  border-radius: 3px;
  background: #f2f2f2;

}

.tag-container .input {

  font-size: 14px;
  display: inline-block;
  align-items: left;
  max-width: 50px;

}

.tag i {
  font-size: 14px;
  margin-left: 5px;
  cursor: pointer;
}

.tag-container .input input {
  padding: 5px;
  outline: none;
  max-width: 80px;
  border: 0;
}

/* ====================
	* alineaciones *
==================== */

.alVariable{text-align: right;}

/* Tamaño Pequeño - Celulares */
@media screen and (max-width: 480px) {
  .alVariable{text-align: left;}
}

/* ====================
	* botones *
==================== */

.btn-inv-primary{
	color:#fff;
	background-color:#007bff;
	border-color:#007bff;
	
}

.btn-inv-primary:hover{
	color:#007bff;
	background-color:#ffffff;
	border-color:#007bff
}

.btn-inv-success{
	color:#fff;
	background-color:#28a745;
	border-color:#28a745
}
.btn-inv-success:hover{
	color:#28a745;
	background-color:#ffffff;
	border-color:#28a745
}

.btn-inv-danger{
	color:#fff;
	background-color:#dc3545;
	border-color:#dc3545
}

.btn-inv-danger:hover{
	color:#dc3545;
	background-color:#ffffff;
	border-color:#dc3545
}

.btn-azul{
	background-color:rgba(43,75,140);
	border-color:rgba(43,75,140);
	color: #fff;
}

.btn-azul:hover{
	background-color:#fff;
	border-color:rgba(43,75,140);
	color: rgba(43,75,140);
}

.btn-azul-inv{
	background-color:#fff;
	
	border-color:rgba(43,75,140);
	
	color: rgba(43,75,140);
}

.btn-azul-inv:hover{
	background-color:rgba(43,75,140);
	border-color:rgba(43,75,140);
	color: #fff;
}

.btn-verde{
	background-color:rgba(146,208,80);
	border-color:rgba(146,208,80);
	color: rgba(56,87,35);
}

.btn-verde:hover{
	background-color:#fff;
	border-color:rgba(146,208,80);
	color: rgba(56,87,35);
}

.btn-verde-inv{	
	background-color:#fff;
	border-color:rgba(146,208,80);
	color: rgba(56,87,35);	
}

.btn-verde-inv:hover{
	background-color:rgba(146,208,80);
	border-color:rgba(146,208,80);
	color: rgba(56,87,35);
}

.btn-naranja{
	background-color:#ffc107;
	border-color:#ffc107;
	color: #000;
}

.btn-naranja:hover{
	background-color:#fff;
	border-color:#ffc107;
	color: #000;
}


.btn-gris{
	background-color:rgba(127,127,127);
	border-color:rgba(127,127,127);
	color: #fff;
}

.btn-gris:hover{
	background-color:#fff;
	border-color:rgba(127,127,127);
	color: rgba(0,0,0);
}


.btn-gris-inv{
	background-color:#fff;
	border-color:rgba(127,127,127);
	color: rgba(0,0,0);
}

.btn-gris-inv:hover{
	background-color:rgba(127,127,127);
	border-color:rgba(127,127,127);
	color: #fff;
}

.btn-rojo{
	background-color:#FF3F3F;
	border-color:#FF3F3F;
	color: #fff;
}

.btn-rojo:hover{
	background-color:#fff;
	border-color:#FF3F3F;
	color: #000;
}

.btn-gris-claro{
	background-color:rgb(124 137 161);
	border-color:rgb(124 137 161);
	color: #fff;
}

.btn-gris-claro:hover{
	background-color:#fff;
	border-color:rgb(124 137 161);
	color: rgb(124 137 161);
}

.btn-primario{
	background-color:var(--srs-color-primario);
	border-color:var(--srs-color-primario);
	color: var(--srs-color-terciario);
}

.btn-primario:hover{
	background-color:#fff;
	border-color:var(--srs-color-primario);
	color: var(--srs-color-primario);
}

.btn-secundario{
	background-color:var(--srs-color-secundario);
	border-color:var(--srs-color-secundario);
	color: var(--srs-color-terciario);
}

.btn-secundario:hover{
	background-color:#fff;
	border-color:var(--srs-color-secundario);
	color: var(--srs-color-secundario);;
}

.btn-terciario{
	background-color:var(--srs-color-quinario);
	border-color:var(--srs-color-quinario);
	color:#fff;
}

.btn-terciario:hover{
	background-color:#fff;
	border-color:var(--srs-color-quinario);
	color: var(--srs-color-quinario);
}

.btn-cuaternario{
	background-color:var(--srs-color-seenario);
	border-color:var(--srs-color-seenario);
	color:#fff;
}

.btn-cuaternario:hover{
	background-color:#fff;
	border-color:var(--srs-color-seenario);
	color: var(--srs-color-seenario);
}

.btn-portada{
	height: 40px;
	border-radius: 20px;
	display: flex;
  justify-content: center;
  align-items: center;
	font-weight: bold;
}

.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}		

.btn-xs1 {
  padding: 1px 4px;
  font-size: 11px;
  line-height: 1.3;
  border-radius: 3px;
}

.btn-block{
	display:block;
	width:100%
}

/* ====================	* botones  SWALL*
==================== */


.swal2-popup button.swal2-confirm {
	background-color:var(--srs-color-primario) !important;
	border:1px solid var(--srs-color-primario) !important;
	color: var(--srs-color-terciario) !important;
	box-shadow: none !important;
}

.swal2-popup button.swal2-confirm:hover {
	background-color:#fff  !important;
	border:1px solid var(--srs-color-primario) !important;    
	color: var(--srs-color-primario)  !important;
}


.swal2-popup button.swal2-styled {
	padding: 10px 15px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	border-radius: 7px !important;
}

.swal2-popup button.swal2-cancel {
	background-color:rgb(124 137 161) !important;
	border:1px solid rgb(124 137 161) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* Hover del botón de Cancelar (Sutil Contraste) */
.swal2-popup button.swal2-cancel:hover {
	background-color:#fff !important;
	border:1px solid rgb(124 137 161) !important;
	color: rgb(124 137 161) !important;
}



.filtro{
	font-weight: bold;
	font-size: 35px;
	cursor: pointer;
	padding: 0 10px;
}
/*
==================
Varios
==================
*/

.degradadoGN{
	background:linear-gradient(90deg, rgba(217, 217, 217, 1) 20%, rgba(0, 0, 0, 1) 80%);
}

.degradadoGN1{
	background:linear-gradient(90deg, rgba(217, 217, 217, 1) 40%, rgba(0, 0, 0, 1) 90%);
}

/*
==================
Tablas
==================
*/


.tablita td{
  padding-left: 3px;
  padding-right: 3px;
	word-break: break-word;
	vertical-align: top;
}

.tablita th{
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
	font-size: 14px;  
}

.tabla thead{
    background-color: var(--srs-color-secondary);
    color: var(--srs-color-gray);
    text-align: center;		
}

.tabla th td{
	padding: .3rem;
	
}

.borde-tabla-si>:not(caption)>*{
	border-width:var(--bs-border-width) 0;
}

.borde-tabla-id>:not(caption)>*>*{
	border-width:0 var(--bs-border-width)
}
.borde-tabla>:not(caption)>*{
	border-width:var(--bs-border-width) 0
}
.borde-tabla>:not(caption)>*>*{
	border-width:0 var(--bs-border-width)
}

/* Aplica estilo solo a las filas impares dentro de mi-tabla */
.striped-impar tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* Color de fondo para las filas impares */
}

.striped-par tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo para las filas impares */
}



@media screen and (max-width: 600px) {
  .tabla-responsiva thead {
    display: none; /* Seguimos ocultando el original */
  }

  .tabla-responsiva tr {
    display: block;
    margin-bottom: 5px;
    /* border: 1px solid #565757;
    border-radius: 8px; */
    overflow: hidden;
  }

  .tabla-responsiva td {
    display: flex; /* CAMBIO CLAVE: Usamos flexbox en lugar de absolute */
    justify-content: space-between; /* Título a la izquierda, dato a la derecha */
    align-items: center;
    padding: 3px 3px;
    border-bottom: 1px solid #afafaf;
    min-height: 20px; /* FIX: Evita que celdas vacías se colapsen */
    word-break: break-word; /* FIX: Si el texto es muy largo, salta de línea en vez de desbordar */
  }

  .tabla-responsiva td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #333;
    padding-right: 15px; /* Espacio mínimo entre título y dato */
    flex-basis: 40%; /* El título ocupa el 40% del ancho */
    text-align: left;
    flex-shrink: 0; /* Impide que el título se encoja demasiado */
  }

  /* Si quieres que el dato ocupe el resto y se alinee a la derecha */
  .tabla-responsiva td span, 
  .tabla-responsiva td {
    text-align: right;
  }

	/* Seleccionamos la celda del botón */
  .tabla-responsiva td.celda-accion {
    display: block;      /* Cambiamos de flex a block */
    width: 100%;         /* Que ocupe todo el ancho */
    text-align: center;  /* Centramos el contenido */
  }

  /* Quitamos el título (label) generado para esta celda */
  .tabla-responsiva td.celda-accion::before {
    content: none;       /* Esto elimina el texto del data-label */
  }
}

/* tabla responsivaG */
@media screen and (max-width: 900px) {
  .tabla-responsivaG thead {
    display: none; /* Seguimos ocultando el original */
  }

  .tabla-responsivaG tr {
    display: block;
    margin-bottom: 5px;
    /* border: 1px solid #565757;
    border-radius: 8px; */
    overflow: hidden;
  }

  .tabla-responsivaG td {
    display: flex; /* CAMBIO CLAVE: Usamos flexbox en lugar de absolute */
    justify-content: space-between; /* Título a la izquierda, dato a la derecha */
    align-items: center;
    padding: 3px 3px;
    border-bottom: 1px solid #afafaf;
    min-height: 20px; /* FIX: Evita que celdas vacías se colapsen */
    word-break: break-word; /* FIX: Si el texto es muy largo, salta de línea en vez de desbordar */
  }

  .tabla-responsivaG td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #333;
    padding-right: 15px; /* Espacio mínimo entre título y dato */
    flex-basis: 40%; /* El título ocupa el 40% del ancho */
    text-align: left;
    flex-shrink: 0; /* Impide que el título se encoja demasiado */
  }

  /* Si quieres que el dato ocupe el resto y se alinee a la derecha */
  .tabla-responsivaG td span, 
  .tabla-responsivaG td {
    text-align: right;
  }

	/* Seleccionamos la celda del botón */
  .tabla-responsivaG td.celda-accion {
    display: block;      /* Cambiamos de flex a block */
    width: 100%;         /* Que ocupe todo el ancho */
    text-align: center;  /* Centramos el contenido */
  }

  /* Quitamos el título (label) generado para esta celda */
  .tabla-responsivaG td.celda-accion::before {
    content: none;       /* Esto elimina el texto del data-label */
  }
}

/* tabla responsivaXS */
@media screen and (max-width: 300px) {
  .tabla-responsivaXS thead {
    display: none; /* Seguimos ocultando el original */
  }

  .tabla-responsivaXS tr {
    display: block;
    margin-bottom: 5px;
    /* border: 1px solid #565757;
    border-radius: 8px; */
    overflow: hidden;
  }

  .tabla-responsivaXS td {
    display: flex; /* CAMBIO CLAVE: Usamos flexbox en lugar de absolute */
    justify-content: space-between; /* Título a la izquierda, dato a la derecha */
    align-items: center;
    padding: 3px 3px;
    border-bottom: 1px solid #afafaf;
    min-height: 20px; /* FIX: Evita que celdas vacías se colapsen */
    word-break: break-word; /* FIX: Si el texto es muy largo, salta de línea en vez de desbordar */
  }

  .tabla-responsivaXS td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #333;
    padding-right: 15px; /* Espacio mínimo entre título y dato */
    flex-basis: 40%; /* El título ocupa el 40% del ancho */
    text-align: left;
    flex-shrink: 0; /* Impide que el título se encoja demasiado */
  }

  /* Si quieres que el dato ocupe el resto y se alinee a la derecha */
  .tabla-responsivaXS td span, 
  .tabla-responsivaXS td {
    text-align: right;
  }

	/* Seleccionamos la celda del botón */
  .tabla-responsivaXS td.celda-accion {
    display: block;      /* Cambiamos de flex a block */
    width: 100%;         /* Que ocupe todo el ancho */
    text-align: center;  /* Centramos el contenido */
  }

  /* Quitamos el título (label) generado para esta celda */
  .tabla-responsivaXS td.celda-accion::before {
    content: none;       /* Esto elimina el texto del data-label */
  }
}

 .imagen-responsiva {
	max-width: 100%;
	height: auto; /* Mantiene la proporción original */
	display: block; /* Elimina el espacio extra debajo de la imagen */
} 

/*
==================
Colores
==================
*/
	
.blanco {
	color: #FFF;
}

.rojo{
	color:#F00;
}

.azul{
	color:#5454df;
}

.verde{
	color:#081;
}

/*==================
 Iconos
==================
*/

.icon{
	vertical-align: middle;
}

.icon-1x {
	font-size: 1em; }

.icon-2x {
	font-size: 2em; }

.icon-3x {
	font-size: 3em; }

.icon-4x {
	font-size: 4em; }

.icon-5x {
	font-size: 5em; }

.icon-6x {
	font-size: 6em; }

.icon-7x {
	font-size: 7em; }

.icon-8x {
	font-size: 8em; }

.icon-9x {
	font-size: 9em; }

.icon-10x {
	font-size: 10em; }


/*
==================
 Fuentes
==================
*/

.Arial36 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 36px;
}
.Arial26 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 26px;
}
.Arial24 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 24px;
}
.Arial20 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 20px;

}
.Arial18 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 18px;
}
.Arial16 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 16px;
}
.Arial14 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 14px;
}
.Arial14R {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 14px;
	color:#F00;
}
.Arial13 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 13px;
}
.Arial12 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 12px;
}
.Arial11 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 11px;
}
.Arial10 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 10px;
}
.Arial9 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 9px;
}
.Arial8 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 8px;
}
.Arial7 {
	font-family: Arial, Helvetica, sans-serif, "Arial";
	font-size: 7px;
}


.Nova36 {
	font-family: 'Nova-Bold';
	font-size: 36px;
}
.Nova26 {
	font-family: 'Nova-Bold';
	font-size: 26px;
}
.Nova25 {
	font-family: 'Nova-Bold';
	font-size: 25px;
}
.Nova24 {
	font-family: 'Nova-Bold';
	font-size: 24px;
}
.Nova23 {
	font-family: 'Nova-Bold';
	font-size: 23px;
}
.Nova22 {
	font-family: 'Nova-Bold';
	font-size: 22px;
}
.Nova21 {
	font-family: 'Nova-Bold';
	font-size: 21px;
}
.Nova20 {
	font-family: 'Nova-Bold';
	font-size: 20px;
	
}
.Nova18 {
	font-family: 'Nova-Bold';
	font-size: 18px;
	
}
.Nova16 {
	font-family: 'Nova-Bold';
	font-size: 16px;
}
.Nova14 {
	font-family: 'Nova-Bold';
	font-size: 14px;
}
.Nova14R {
	font-family: 'Nova-Bold';
	font-size: 14px;
	color:#F00;
}
.Nova13 {
	font-family: 'Nova-Bold';
	font-size: 13px;
}
.Nova12 {
	font-family: 'Nova-Bold';
	font-size: 12px;
}
.Nova11 {
	font-family: 'Nova-Bold';
	font-size: 11px;
}
.Nova10 {
	font-family: 'Nova-Bold';
	font-size: 10px;
}
.Nova9 {
	font-family: 'Nova-Bold';
	font-size: 9px;
}
.Nova8 {
	font-family: 'Nova-Bold';
	font-size: 8px;
}

.Century{
	font-family: 'Century-G';
}

.Century-B{
	font-family: 'Century-G-B';
}
.Century36{
	font-family: 'Century-G';
	font-size: 36px;
}

.Century26{
	font-family: 'Century-G';
	font-size: 26px;
}

.Century24{
	font-family: 'Century-G';
	font-size: 24px;
}

.Century22{
	font-family: 'Century-G';
	font-size: 22px;
}

.Century20{
	font-family: 'Century-G';
	font-size: 20px;
}

.Century18{
	font-family: 'Century-G';
	font-size: 18px;
}

.Century16{
	font-family: 'Century-G';
	font-size: 16px;
}

.Century14{
	font-family: 'Century-G';
	font-size: 14px;
}

.Century13{
	font-family: 'Century-G';
	font-size: 13px;
}

.Century12{
	font-family: 'Century-G';
	font-size: 12px;
}

.Century11{
	font-family: 'Century-G';
	font-size: 11px;
}

.Century10{
	font-family: 'Century-G';
	font-size: 10px;
}

.Century9{
	font-family: 'Century-G';
	font-size: 9px;
}

.Century8{
	font-family: 'Century-G';
	font-size: 8px;
}

.Century36-B{
	font-family: 'Century-G-B';
	font-size: 36px;
}

.Century26-B{
	font-family: 'Century-G-B';
	font-size: 26px;
}

.Century24-B{
	font-family: 'Century-G-B';
	font-size: 24px;
}

.Century22-B{
	font-family: 'Century-G-B';
	font-size: 22px;
}

.Century20-B{
	font-family: 'Century-G-B';
	font-size: 20px;
}

.Century18-B{
	font-family: 'Century-G-B';
	font-size: 18px;
}

.Century16-B{
	font-family: 'Century-G-B';
	font-size: 16px;
}

.Century14-B{
	font-family: 'Century-G-B';
	font-size: 14px;
}

.Century13-B{
	font-family: 'Century-G-B';
	font-size: 13px;
}

.Century12-B{
	font-family: 'Century-G-B';
	font-size: 12px;
}

.Century11-B{
	font-family: 'Century-G-B';
	font-size: 11px;
}

.Century10-B{
	font-family: 'Century-G-B';
	font-size: 10px;
}

.Century9-B{
	font-family: 'Century-G-B';
	font-size: 9px;
}

.Century8-B{
	font-family: 'Century-G-B';
	font-size: 8px;
}

.Monserrat {
	font-family: 'Monserrat';
}

.Monserrat14 {
	font-family: 'Monserrat';
	font-size: 14px;
}

.Monserrat18 {
	font-family: 'Monserrat';
	font-size: 18px;
}

.Monserrat20 {
	font-family: 'Monserrat';
	font-size: 20px;
}

.Monserrat22 {
	font-family: 'Monserrat';
	font-size: 22px;
}

.Monserrat-l {
	font-family: 'Monserrat-l';
}

.Monserrat-l24 {
	font-family: 'Monserrat-l';
	font-size: 24px;
}

.Monserrat-l22 {
	font-family: 'Monserrat-l';
	font-size: 22px;
}


/*
==================
 Inputs
==================
*/


input[type=file]::-webkit-file-upload-button {
    line-height: 10px;
    padding: 3px;
  }
  
  
  input[type=date]::-webkit-calendar-picker-indicator {
    /*display: none;*/
   /* width: 10px;*/
    margin: 0;
    padding: 0;
  }

	input[type=time]::-webkit-calendar-picker-indicator {
    /*display: none;*/
   /* width: 10px;*/
    margin: 0;
    padding: 0;
  }

	input[type=number]::-webkit-calendar-picker-indicator {
    /*display: none;*/
   /* width: 10px;*/
    margin: 0;
    padding: 0;
  }

/*
========================
		Barra Navegacion
========================
*/

header{
	background-color: var(--srs-color-primario);
	color: var(--srs-color-terciario);
	width: 100%;
}

.div-log {
	padding:5px 35px 5px 43px;
}

.nv-sm-menu{
	width: 100%;
	padding:0 35px 0 35px;
}

.nv-sm-menu ul li{
	display: inline-block;
	position: relative;	
}

.sm-menu_bar{
	display: none;
}

.nv-ul-pc {
	overflow: hidden;
	list-style: none;
	padding: 0 0 0 0 ;
	margin: 0 0 0 0;

}

.nv-ul-pc span{
	margin-right: 5px;
	font-size: 12px;
	display: none;
}

.a-ppal {
	display:block;
	padding:0 8px 0 8px;
	font-family: 'Century-G';
	font-size: 16px;
	color: var(--srs-color-terciario);
	text-decoration: none;
}

.a-ppal:hover, .a-ppal:focus{
	color: var(--srs-color-cuaternario);
}

.a-sec{
	display:block;
	text-decoration: none;
	padding:0px 8px;
	font-family: 'Century-G';
	font-size: 16px;
	color: var(--srs-color-terciario);
}

.a-sec:hover, .a-sec:focus{
	color: var(--srs-color-primario);
}

.nv-sm-menu-se ul li .children{	
	display:none;
	background:#ffffff;
	position: absolute;
	z-index: 1000;
	width: max-content;
	padding: 0;
	margin-top: 8px;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	
}

.nv-sm-menu-se ul li .children li{
	display: block;
	border-bottom: 1px solid #ccc; /* La línea divisoria */
}
.nv-sm-menu-se ul li .children li:hover{
	background: #e3e3f7;	
}

.nv-sm-menu-se{
	width: 100%;
	background-color:var(--srs-color-secundario);
	z-index: 1000;
	padding: 7px 12px 7px 35px;
}

.nv-sm-menu-se ul{
	list-style: none;
	margin: 0;
  padding: 0;
}

.nv-sm-menu-se ul li{
	display: inline-block;
	position: relative;
}


.a-sec-ch{
	display:block;
	text-decoration: none;
	padding:1px 1rem;
	font-family: 'Century-G';
	font-size: 14px;
	color: #000000;
}

.a-sec-ch:hover, .a-sec-ch:focus{
	text-decoration: none;
	color: #000000;
}

#relleno-sm{
	background-color:var(--srs-color-secundario);
}

@media screen and (max-width: 768px) {
	
	.div-log {
		text-align: center;
		width: 100%;
	}

	.nv-sm-menu{		
		width: 100%;
		left: -100%;
		padding:  0 0 0 0;
		/* position: fixed; */
		z-index: 1000;
		position: absolute;
		/* top: 0;
		bottom: 0; */
		
	}

	.nv-sm-menu ul li{
		display: block;
		float: none;
	}

	.sm-menu_bar{
		display: block;
		width: 100%;
	}
	.sm-bt-menu{
		display: block;
		padding: 10px 20px;
		background-color:var(--srs-color-terciary);
		color: var(--srs-color-primary);
		text-decoration: none;
		font-family: 'Monserrat';
		font-size: 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.sm-menu_bar span{
		float: right;
		font-size: 30px;
	}

	.nv-ul-pc {
		padding: 0 0 0 0;
		background-color:var(--srs-color-secundario-tr);
	}

	.a-ppal {
		padding:8px 20px 8px 20px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}

	.nv-ul-sc {
		padding: 0 5px 0 5px;		
	}

	.a-sec {
		padding:8px 20px 8px 20px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}

	
	.nv-sm-menu-se ul li:hover .children{
		display: none;
	}

	.nv-sm-menu-se ul li .children{
		width: 100%;
		position: relative;
		margin-top: 0px;
	}

	.nv-sm-menu-se{
		width: 100%;
		left: -100%;
		padding:  0 0 0 0;
		/* position: fixed; */
		position: absolute;
		background-color:var(--srs-color-secundario-tr);
		
		
	}

	.nv-sm-menu-se ul li{
		display: block;
		float: none;
			
	}

	.a-sec-ch{
		margin-left: 5px;
	}

		#relleno-sm {
		display: none;
	}

}




/* ============================== */

/* ======================= */

/*
========================
		SuperMenu
========================
*/





#pie-pagina{
	width: 100%;
	padding: 0 50px 0 66px;
	color:#ffffff;
	font-family: 'Century-G';
	font-size: 12px;
	position: fixed;
	bottom: 0;
	z-index:2000;
	padding-bottom: 14px;
	background: #00003F;	
}	

#pie-pagina-2{
	text-align: right;
}

@media screen and (max-width: 768px) {

	





	


	#pie-pagina{
		padding: 0 0 0 0;
		text-align: center;
	}

	#pie-pagina-1{
		display: none;
	}

	#pie-pagina-2{
		text-align: center;
	}
}



/* 
========================
		Otros
======================== 
*/

.titulos {
	background-color: var(--srs-color-primario);
	color: var(--srs-color-terciario);
	text-align: center;
	font-weight: bold;
	border-bottom-color: #ffffff;
	border-top-color: #ffffff;
	border-right-color: #ffffff;
	border-left-color: #ffffff;
}

.titulos2 {
	background-color: var(--srs-color-secundario);
	color: var(--srs-color-terciario);
	text-align: center;
	font-weight: bold;
	border-bottom-color: #ffffff;
	border-top-color: #ffffff;
	border-right-color: #ffffff;
	border-left-color: #ffffff;
}

.titulos-bordes {
	background-color: var(--srs-color-primario);
	color: #000000;
	text-align: center;
	font-weight: bold;
	border-bottom-color: #000000;
	border-top-color: #000000;
	border-right-color: #000000;
	border-left-color: #000000;
}

.titulos-modal{
	background-color: var(--srs-color-primario);
	color: var(--srs-color-terciario);
	text-align: left;
	font-weight: bold;
	padding-left: 16px;
}

.titulos-tablas {
	background: var(--srs-color-primario);;
	color: #FFFFFF;
	text-align: center;
}

.bordes-blancos {
	border-bottom-color: #ffffff;
	border-left-color: #ffffff;
	border-right-color: #ffffff
}

.centrado {
  margin: auto;
  width: 50%;
}

.texto-centrado{
	text-align: center;
}

/* ====================
	Ordenador y Buscador
==================== */

	.ordenado {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
  }

  /* Indicadores por defecto */
  .ordenado::after {
    content: " ↕";
    font-size: 20px;
  }

  /* Cuando está activo */
  .ordenado.asc::after {
    content: " ↑";
    opacity: 1;
  }

  .ordenado.desc::after {
    content: " ↓";
    opacity: 1;
  }

  #buscador {
    margin-bottom: 20px;
  }

  #div-buscador{
    width:40%;
  }

  /* Oculto por defecto en escritorio */
  .orden-movil {
    display: none;
    margin-bottom: 15px;
  }

@media screen and (max-width: 600px) {
  /* Mostrar solo en móvil */
  .orden-movil {
    display: block;
  }

  #div-buscador{
    width:100%;
  }

}