@charset "utf-8";

@font-face {
	font-family: 'Gotham-Medium-Regular';
	src: url("fonts/Gotham-Medium-Regular.ttf");
}

body,
html {
	font-family: Gotham-Medium-Regular !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	font-weight: 800;
}

html {
	height: 100%;
}

body {
	position: absolute;
	margin: 0;
	min-height: 100%;
	background-color: white;
	width: 100% !important;
}

.fontFamily {
	font-family: Gotham-Medium-Regular !important;
}

textarea {
	resize: none;
	font-family: inherit !important;
	border: 1px solid #e6e6e6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0px;
}

p {
	margin: 0px;
}

ul,
li {
	margin: 0px;
	list-style-type: none;
}

:focus {
	outline: 0;
}

a:link,
a:visited,
a:active {
	text-decoration: none;
	color: inherit;
}

table a:hover {
	text-decoration: underline;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

img,
iframe {
	border: none;
	text-decoration: none;
}

input,
select,
button {
	font-size: 110%;
	font-family: inherit;
	height: 32px;
	border: 1px solid #e6e6e6;
}


.tablaBorder td {
	border-spacing: 0px;
	border-collapse: separate;
	border: 1px solid #f2f2f2;
}

.borderGrisFuerte {
	border: 1px solid #858585 !important;
}

.borderGrisLigero {
	border: 1px solid #f2f2f2 !important;
}

.borderBottomNegro {
	border-bottom: 1px solid black
}

.letraPequenia {
	font-size: 80%;
}

.inputForm {
	width: 95%;
}

.inputFormPassword {
	width: 95%;
}

.inputLogin {
	height: 45px;
	font-size: 16px;
}

.divLayout {
	width: 100vw;
}

.labelForm {
	margin-left: 5%;
	font-weight: bold;
}

.formaLogin {
	color: black;
}

.borderLogoLogin {
	border-bottom: 4px solid #d8262f !important;
}

.tituloSistemaLogin {
	font-weight: bold;
	font-size: 160%;
	vertical-align: bottom;
	padding-bottom: 10px;
	padding-left: 30px;
	color: black;
}

.tituloURLAlumnoLogin {
	font-weight: bold;
	font-size: 120%;
	vertical-align: bottom;
	padding-bottom: 10px;
	padding-left: 20px;
}


.masthead {
	position: relative;
	background: url(../images/banerMovil.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100vh;
}

.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: transparent;
	color: white !important;
	font-size: 90% !important;
}

.tablaFooter {
	height: 50px;
	width: 100%;
	color: white !important;
	font-size: 96%;
}

input[type="checkbox"] {
	height: 17px;
	width: 17px;
}



/*Para validaciones de jquery form*/
.error {
	color: red;
}

.exitoSmallLabel {
	color: #00b300;
	font-size: 90%;
	font-weight: bold;
}

.errorLabel {
	color: red;
	white-space: nowrap;
}

.errorField {
	border: 2px solid red;
	color: red;
}

.borderGrisLigero {
	border: 1px solid #f2f2f2;
}

#tituloInicio {
	letter-spacing: 3px;
	font-size: 110%;
	font-weight: bold;
}

.labelInicio {
	letter-spacing: 3px;
	font-size: 110%;
	font-weight: bold;
}

.bodyClass {
	margin-top: 30px;
}


.fondoTituloSeccion {
	background: #f0f2f4;
	font-size: 105%;
	letter-spacing: .1em;
	font-weight: normal;
}

/* Forzar color negro en iconos */
.uvm-icon-black {
	background-color: #000000;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	display: inline-block;
	width: 25px;
	height: 25px;
	vertical-align: middle;
}

.img-black {
	filter: brightness(0) !important;
}

.tablaDatos {
	width: 100%;
}

.divBody {
	width: 100%;
	/*max-width: 1400px;*/
	margin-top: 0px;
	max-height: 100%;
}

.divMenuSeccion {
	text-align: center;
	margin-top: 100px;
}

.renglonMenuSeccion {
	height: 35px;
}

.tablaIconos {
	margin-bottom: 0;
	white-space: nowrap;
	font-size: inherit;
	background: white;
	color: #000000;
	font-weight: bold;
}

.tablaIconos table tr {
	height: 28px !important;
}

.iconoTexto {
	display: inline-block;
	vertical-align: 5px;
}

.renglonMasInfoLabel {
	height: 40px;
	font-weight: bold;
}

.fondoTablaSeccionMenu {
	background: #f9f9f9;
}

/* Responsive para formularios de búsqueda */
@media (max-width: 768px) {

	.divTablaFormulario .tablaFormulario tbody,
	#formPagosFraudulentos .tablaFormulario tbody {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 15px !important;
	}

	.divTablaFormulario .tablaFormulario tr,
	#formPagosFraudulentos .tablaFormulario tr {
		min-width: auto !important;
		width: 100% !important;
	}

	.divTablaFormulario .tablaFormulario .botonEditar,
	#formPagosFraudulentos .tablaFormulario .botonEditar {
		width: 100% !important;
		align-self: stretch !important;
	}
}

/* =========================================================================
   MODERNIZACIÓN DE FILTROS - Card con borde rojo
   ========================================================================= */

/* Contenedor principal de filtros */
.divFiltros {
	background: #FFFFFF !important;
	border-radius: 12px !important;
	border: 1px solid #e5e7eb !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
	padding: 15px !important;
	margin: 20px auto !important;
	max-width: none !important;
	width: calc(100% - 20px) !important;
	box-sizing: border-box !important;
}

/* Tabla dentro de filtros */
.divFiltros table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: none !important;
	background: transparent !important;
	display: block !important;
}

/* tbody como contenedor flex horizontal */
.divFiltros table tbody {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 16px !important;
	padding: 0 !important;
	width: 100% !important;
}

/* tr se disuelve */
.divFiltros table tr {
	display: contents !important;
}

/* TODAS las td se convierten en columnas (label arriba, input abajo) */
.divFiltros table td {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 6px !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	height: auto !important;
	width: auto !important;
	min-width: auto !important;
	flex: 0 0 auto !important;
	white-space: normal !important;
}

/* Celdas que contienen selects o inputs - crecen horizontalmente */
.divFiltros table td:has(select),
.divFiltros table td:has(input[type="text"]),
.divFiltros table td:has(input[type="date"]) {
	flex: 1 1 150px !important;
	min-width: 150px !important;
}

/* Celdas de solo label (strong sin input) - se fusionan visualmente con la siguiente celda */
.divFiltros table td:has(strong):not(:has(input)):not(:has(select)):not(:has(button)) {
	flex: 0 0 auto !important;
	min-width: auto !important;
	margin-bottom: 0 !important;
	/* Quitar el gap del contenedor padre solo para esta celda */
	margin-right: -12px !important;
	align-self: flex-end !important;
	padding-bottom: 10px !important;
}

/* Etiquetas de filtros */
.divFiltros table td strong {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #4B5563 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	line-height: 1 !important;
}

/* Selects y inputs dentro de filtros */
.divFiltros select,
.divFiltros input[type="text"],
.divFiltros input[type="date"] {
	border: 1px solid #D1D5DB !important;
	border-radius: 8px !important;
	padding: 8px 12px !important;
	height: 40px !important;
	font-size: 14px !important;
	transition: all 0.3s ease !important;
	background-color: #F9FAFB !important;
	box-sizing: border-box !important;
	min-width: 100px !important;
	max-width: none !important;
	width: 100% !important;
}

.divFiltros select:focus,
.divFiltros input[type="text"]:focus,
.divFiltros input[type="date"]:focus {
	border-color: #D8262F !important;
	background-color: #FFFFFF !important;
	box-shadow: 0 0 0 3px rgba(216, 38, 47, 0.1) !important;
	outline: none !important;
}

/* Botones dentro de filtros */
.divFiltros .botonEditar {
	background: #D8262F !important;
	border-radius: 8px !important;
	height: 40px !important;
	padding: 0 20px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	transition: all 0.2s ease !important;
	border: none !important;
	box-shadow: 0 2px 4px rgba(216, 38, 47, 0.2) !important;
	color: white !important;
	cursor: pointer !important;
	font-size: 12px !important;
	min-width: 100px !important;
	max-width: none !important;
	flex: 0 0 auto !important;
}

.divFiltros .botonEditar:hover {
	background: #B91C1C !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 6px rgba(216, 38, 47, 0.3) !important;
}

/* Celda con botón - alinear al fondo */
.divFiltros table td:has(.botonEditar) {
	align-self: flex-end !important;
	flex: 0 0 auto !important;
}

/* Responsive para filtros */
@media (max-width: 768px) {

	.divFiltros table tbody {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}

	.divFiltros table td {
		width: 100% !important;
		min-width: auto !important;
	}

	.divFiltros table td:has(strong):not(:has(input)):not(:has(select)):not(:has(button)) {
		margin-right: 0 !important;
		padding-bottom: 0 !important;
		align-self: stretch !important;
	}

	.divFiltros select,
	.divFiltros input[type="text"],
	.divFiltros input[type="date"] {
		width: 100% !important;
		min-width: auto !important;
	}

	.divFiltros .botonEditar {
		width: 100% !important;
		max-width: none !important;
		min-width: auto !important;
	}
}

.divFiltrosCampos {
	border-bottom: 1px solid #898989;
	background: #f2f2f2;
	color: #f5f5f5;
}

.tituloLogin {
	font-size: 180%;
	margin-bottom: 30px;
	margin-top: 30px;
	font-weight: bold;
	word-spacing: 2px;
}

.sesionCerrada {
	font-size: 100%;
	word-spacing: 2px;
	color: red;
}

.labelServidorPruebas {
	background: #006666;
	color: white;
}

/* ---------- Loader -----------*/
.spinner {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.75) url(../images/loadingSmall.gif) no-repeat center center;
	z-index: 10000;
}

/* ---------- Formulario -----------*/
.tablaFormulario {
	background: white;
	width: 100%;
	max-width: none;
	margin-top: 10px;
	border-radius: 5px;
}

.tablaFormulario tr:nth-child(even) {
	background-color: #fAfAfA;
}

.tablaFormulario th {
	color: white;
	height: 30px;
	background: linear-gradient(#666, #333);
	border-radius: 5px;
	text-align: center;
}

.tablaFormulario td {
	height: 40px;
	border-radius: 5px;
}

.tablaFormulario tr:hover {
	background: #d2d9df;
}

.linkIconoTitulo {
	float: left !important;
	padding-left: 12px;
	padding-top: 2px;
}

.linkIconoTitulo :hover {
	background: #d8262f !important;
	cursor: pointer;
}

.loginSuperior {
	opacity: 1 !important;
	z-index: 999;
}

.lemaLogin {
	font-size: 150%;
	color: #d8262f;
	font-weight: 700;
	line-height: 1.8;
	margin-left: 10%;
}

.loginAbajo {
	background-image: url("../images/fondo_inicio_3.jpg");
	position: fixed;
	width: 100%;
	height: 100%;
	background-size: cover;
	z-index: 1;
}

.tablaIconosForm {
	word-spacing: 1.5px;
}

.fondoVerdeStatus {
	background: #d9f2e6 !important;
}

.fondoRojoStatus {
	background-color: #fdb4b4 !important;
}

.fondoAmarilloStatus {
	background-color: #ffffe6 !important;
	color: black;
}

.fondoAzulStatus {
	background-color: #d8e5f3 !important;
	color: black;
}

.fondoGris {
	background-color: #e1e6ea !important;
}

.fondoNegro {
	background-color: #252525 !important;
	color: white;
}

.fondoLiberacionAcademicaAdministrativa {
	background: #9ec7c7 !important;
}

.fondoDeudor {
	background: #ff9999 !important;
}

.fondoCuentaIncobrable {
	background: #e6e6e6 !important;
	color: #404040;
}

.displayNone {
	display: none;
}

/* --- Contenedor para inputs con símbolos ($ o %) --- */
.input-symbol-container {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	width: 95% !important;
}

.input-symbol-container .inputForm {
	flex: 1 !important;
	width: 100% !important;
	margin: 0 !important;
}

.input-symbol-container .symbol {
	font-weight: bold !important;
	white-space: nowrap !important;
}

/* ----------------------------------*/
/* ---------- Datatable -----------*/
.dataTables_wrapper,
div[id$="_wrapper"] {
	background: white !important;
	margin: 0 !important;
	padding: 15px 0 0 0 !important;
	/* Padding superior para los controles */
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	box-sizing: border-box !important;
}

/* Tabla principal - asegurar que no se salga */
.table100,
.table100.ver2.m-b-10 {
	width: calc(100% - 20px) !important;
	max-width: none !important;
	margin: 0 auto 20px auto !important;
	padding: 0 15px !important;
	/* Padding lateral para alinear controles internos con filtros de arriba */
	background: white !important;
	border-radius: 12px !important;
	overflow-x: auto !important;
	box-sizing: border-box !important;
}

.table100 table,
.datatableSIS {
	width: 100% !important;
	max-width: 100% !important;
	table-layout: auto !important;
	box-sizing: border-box !important;
}

#DataTables_Table_0_filter input {
	width: 300px;
	height: 35px !important;
	min-height: 35px !important;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 14px;
}

#DataTables_Table_0_length select {
	height: 30px !important;
	min-height: 30px !important;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 14px;
}

/* Mejorar el espaciado de los controles de DataTables */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
	margin-bottom: 15px;
}

.dataTables_wrapper .dataTables_info {
	margin: 0 20px;
	color: #6b7280;
	font-size: 14px;
}

/* ----------------------------------*/
@media screen and (max-width: 1024px) {

	input,
	select,
	button {
		height: 40px !important;
		font-size: 115% !important;
	}
}

.ui-state-active {
	border: 1px solid #333333 !important;
	background: #333333 !important;
	font-weight: bold !important;
	color: #ffffff !important;
}

/* .tablaResumenCorrida {} */

.tablaResumenCorrida tr {
	height: 30px;
}

.tablaResumenCorrida td {
	height: 30px;
}

.tablaResumenCorrida tr:hover {
	background-color: #f5f5f5;
}

.tablaResumenCorrida th {
	background: #f0f2f4;
	color: black;
	height: 30px;
	border-bottom: 2px solid #a5b3c0
}

.totalResumen {
	background: #f0f2f4;
	color: black;
	height: 30px;
	border-bottom: 2px solid #1abac8;
	font-weight: bold;
}

.etiquetaTotal {
	font-weight: bold;
	font-size: 16px;
	text-align: right;
	width: 70%;
}

.campoCorrida {
	width: 80px;
	text-align: right;
}

.textoRemarcado {
	font-weight: bold;
	font-size: inherit;
}

.textoRemarcadoGrande {
	font-weight: bold;
	font-size: 115%;

}

.resultadoTablaRCorrida {
	background: #f0f2f4;
	font-weight: bold;
	font-size: 14px;
}

.widgetCorrida {
	border-left-width: 8px;
	border-left-style: solid;
	border-left-color: #a5b3c0;
	background-color: #f0f2f4;
	width: 40%;
	height: 80px;
}

.headerWidget {
	font-weight: bold;
	text-align: center;
}

.subheaderWidget {
	margin: 10px;
	margin-bottom: 0px;
	font-size: 15px;
	font-weight: bold;
	color: #333333;
	text-align: center;
}

.botonInicio {
	color: black;
	background: transparent;
	font-size: 100%;
	border-radius: 5px;
	border: 1px solid #6c757d;
	font-weight: 600;
}

.botonInicio:hover {
	background: #d8262f;
	color: #fff;
	border-radius: 5px;
}

.botonAceptar {
	display: inline-block;
	background-color: #e2445c;
	border: none;
	color: #FFFFFF !important;
	text-align: center;
	padding: 5px;
	width: 120px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	margin-top: 0px;
	text-decoration: none;
}

.botonAceptar span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.botonAceptar span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.botonAceptar:hover span {
	padding-right: 25px;
}

.botonAceptar:hover span:after {
	opacity: 1;
	right: 0;
}

.botonCancelar {
	display: inline-block;
	background: #b3b3b3;
	border: none;
	color: #FFFFFF !important;
	text-align: center;
	padding: 5px;
	width: 120px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	margin-top: 0px;
	text-decoration: none;
	border-radius: 5px;
	font-size: 95%;
}

.botonCancelar span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.botonCancelar span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.botonCancelar:hover span {
	padding-right: 25px;
}

.botonCancelar:hover span:after {
	opacity: 1;
	right: 0;
}

.botonEditar {
	display: inline-block;
	background: linear-gradient(#e05259, #d8262f);
	border: none;
	color: #FFFFFF !important;
	text-align: center;
	padding: 5px;
	width: 120px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	margin-top: 0px;
	text-decoration: none;
	border-radius: 5px;
}

.botonEditar span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.botonEditar span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -10px;
	transition: 0.5s;
}

.botonEditar:hover span {
	padding-right: 25px;
}

.botonEditar:hover span:after {
	opacity: 1;
	right: 0;
}

.notaControlEscolar {
	font-size: 11px;
	color: #111111;
}


/* Colores de perfile para URL PERMISOS*/
.colorPefilURL1 {
	color: #004d99;
	font-weight: bold;
	text-decoration: underline;
}

.colorPefilURL2 {
	color: #004d00;
	font-weight: bold;
	text-decoration: underline;
}

.colorPefilURL3 {
	color: #663300;
	font-weight: bold;
	text-decoration: underline;
}

.colorPefilURL4 {
	color: #330080;
	font-weight: bold;
	text-decoration: underline;
}

.colorPefilURL5 {
	color: #990033;
	font-weight: bold;
	text-decoration: underline;
}

.colorPefilURL6 {
	color: #608000;
	font-weight: bold;
	text-decoration: underline;
}

.colorPefilURL7 {
	color: #a3297a;
	font-weight: bold;
	text-decoration: underline;
}

.colorPefilURL8 {
	color: #006699;
	font-weight: bold;
	text-decoration: underline;
}


.horaActual {
	font-size: 115%;
	word-spacing: 2px
}

.seccionSolicitudInscripcion {
	border-bottom: 1px solid #d8262f !important;
	color: #000000 !important;
	font-weight: bold;
	font-size: 105%
}

.ui-accordion .ui-accordion-header {
	text-align: left !important;
}

.fa:before {
	font-size: 26px !important;

}

.fa:hover:before {
	color: #d8262f !important;
}

.faCheck:before {
	font-size: 25px !important;
	color: #339933 !important;
}

/**** Estilos eval Programas ***/
.editArea {
	margin-top: 10px;
	margin-bottom: 20px;
	border: 5px dashed #DDDDDD;
	width: 100%;
	min-height: 100px;
	top: 5px;
	padding-bottom: 20px;
}

.botonAgregar {
	display: inline-block;
	background: white;
	border: none;
	color: #d8262f !important;
	text-align: center;
	padding: 5px;
	width: 40px;
	height: 40px;
	transition: all 0.5s;
	cursor: pointer;
	margin-top: 15px;
	font-size: 30px;
	text-decoration: none;
}

.seccionEva {
	border: 2px solid #DDDDDD;
	min-height: 50px;
	margin-bottom: 20px;
}

.seccionEvaHeader {
	background: #f2f2f2;
	border-left: 8px solid #d8262f;
	color: black;
	height: 30px;
	border-bottom: 2px solid #d8262f;
}

.descripcionSeccion {
	width: 80%;
	font-weight: bold;
	font-size: 15px;
	text-align: center;
}

.botonOpciones {
	display: inline-block;
	background-color: #f2f2f2;
	border: none;
	color: #444444 !important;
	text-align: center;
	padding: 5px;
	width: 28px;
	height: 28px;
	transition: all 0.5s;
	cursor: pointer;
	font-size: 15px;
	text-decoration: none;
}

.textoEtiqueta {
	margin-left: 10px;
	margin-right: 10px;
	width: 100%;
	font-weight: bold;
	font-size: 14px;
	text-align: left;
}

.componente {
	margin-top: 20px;
	margin-bottom: 20px;
}

.etiquetaGrupo {
	margin-left: 5px;
	margin-right: 5px;
	text-align: center;
	min-width: 50px;
}

.etiquetaTabla {
	margin-left: 5px;
	margin-right: 5px;
	text-align: center;
	min-width: 50px;
	width: 95%;
	height: 26px;
	background: #f2f2f2;
}

.headerTablaRadio {
	background: #f2f2f2;
	color: black;
	height: 30px;
}

.botonRenglonTabla {
	color: #009AFF !important;
	background: #F9F8F8;
}

.headerEncuesta {
	background: #555555;
	/*#f2f2f2;*/
	color: white;
	height: 30px;
	font-size: 18px;
	margin-top: 30px;
	margin-bottom: 30px;
}

.subtituloEncuesta {
	font-size: 15px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 50px;
}

/**** Estilos eval Programas ***/

/** ----- Dashboard ------------ */
.dashIngresosProyectados {
	background: #6092cd !important;
	color: white !important;
	font-size: 105% !important;
}

.dashIngresosProyectados span {
	font-size: 130% !important;
}

.dashIngresosReales {
	background: #01b8aa !important;
	color: white !important;
	font-size: 105% !important;
}

.dashIngresosReales span {
	font-size: 130%
}

.dashReembolsos {
	background: #f4a522;
	color: white;
	font-size: 105%
}

.dashReembolsos span {
	font-size: 130%
}

.dashEgresosReales {
	background: #ff6666 !important;
	color: white !important;
	font-size: 105% !important;
}

.dashEgresosReales span {
	font-size: 130%
}

.ui-menu {
	width: 160px;
}

.textoVerde {
	color: #006600;
}

.textoRemarcadoAmarillo {
	background-color: #ffffcc !important;
	font-size: 110%;
	font-weight: bold;
}

.wrapper {
	margin-left: 240px;
}

.wrapper {
	padding: 30px 0 0;
	transition: all 0.3s ease-out;
}

#header {
	height: auto;
	/* Cambiar a auto para que se ajuste al contenido */
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	transition: all 0.5s;
	z-index: 997;
	background: transparent;
	/* Hacer transparente para no interferir */
}

header {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: auto;
	/* Cambiar a auto para que se ajuste al contenido */
	background: white;
	align-items: stretch;
	box-shadow: 0px 0.052083333in 11.25pt -9px rgb(0 0 0 / 10%);
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}

.menuOpcionIzquierdo {
	margin-left: 30px;
	color: white !important;
}

.opcionMenuIzquierdo {
	font-size: 22px;
}

.tituloSeccion {
	height: 25px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
}


.tituloSeccion h3 {
	font-size: 18px;
	color: black;
	text-align: center;
	font-weight: 700;
	position: relative;
}

.tituloSeccion h3::before {
	content: '';
	position: absolute;
	display: block;
	width: 120px;
	height: 1px;
	background: black;
	bottom: 1px;
	left: calc(50% - 60px);
}

.tituloSeccion h3::after {
	content: '';
	position: absolute;
	display: block;
	width: 40px;
	height: 3px;
	bottom: 0;
	background: #d8262f;
	left: calc(50% - 20px);
}


.tituloSeccionCentro {
	line-height: 42px;
	height: 25px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
}


.tituloSeccionCentro h3 {
	font-size: 18px;
	color: #333;
	text-align: center;
	font-weight: 700;
	position: relative;
}

.tituloSeccionCentro h3::before {
	content: '';
	position: absolute;
	display: block;
	width: 1000px;
	height: 1px;
	background: #cccccc;
	bottom: 1px;
	left: calc(50% - 500px);
}

.tituloSeccionCentro h3::after {
	content: '';
	position: absolute;
	display: block;
	width: 600px;
	height: 2px;
	bottom: 0;
	background: #d8262f;
	left: calc(50% - 300px);
}

.divInterno {
	margin: 30px;
	text-align: center;
}

.heroTituloCurso {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(rgba(239, 35, 60, .95), rgba(239, 35, 60, .95)), url(../images/hero-bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bannerTituloCurso {
	position: relative;
	width: 100%;
	padding: 20px 0;
	color: white;
}

.margenIzquierdo {
	margin-left: 20px;
}

.linkBotonRojo {
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	color: #fff !important;
	background: linear-gradient(#e05259, #d8262f);
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
}

.linkBotonRojo:hover {
	color: white !important;
	background: #737373 !important;
}

.dashIngresosReales {
	background: #01b8aa !important;
	color: white !important;
	font-size: 105% !important;
}

.dashIngresosReales span {
	font-size: 130%
}

.dashIngresosReales {
	background: #01b8aa !important;
	color: white !important;
	font-size: 105% !important;
}

.dashIngresosReales span {
	font-size: 130%
}

.fondoMensajeAlerta {
	background: #ffff66 !important;
}

.iconoColorVerde {
	color: #009900
}

.iconoColorRojo {
	color: #cc0000;
}

/* ESPACIADO PARA CONTENIDO PRINCIPAL - HEADER FIJO */
body {
	padding-top: 105px !important;
	/* Ajustar para header fijo (barra roja ~60px + menú ~40px) */
}

.bodyClass {
	margin-top: 0 !important;
	padding-top: 20px !important;
}

.wrapper {
	margin-top: 0 !important;
	padding-top: 20px !important;
}

/* ============================================ */
/* BREADCRUMB GLOBAL                           */
/* ============================================ */

/* ESPACIADO PARA DIVS DE CONTENIDO */
.divBody {
	margin-top: 5px !important;
	padding-top: 10px !important;
}

/* ASEGURAR QUE TODOS LOS CONTENEDORES PRINCIPALES TENGAN ESPACIO */
.container,
.container-fluid {
	margin-top: 10px !important;
}

/* ESPACIADO PARA PÁGINAS CON NAVEGACIÓN */
.divLayout {
	padding-top: 15px !important;
}

/* ============================================ */
/* ESPACIADO ENTRE MÓDULOS                      */
/* ============================================ */
.divBody>.table100 {
	margin-bottom: 25px;
}

.divBody>form {
	width: calc(100% - 20px) !important;
	margin: 20px auto !important;
	box-sizing: border-box !important;
}

.divBody>.divFiltros {
	margin-bottom: 15px;
}

.divTablaFormulario {
	width: calc(100% - 20px) !important;
	margin: 20px auto !important;
	padding: 15px !important;
	box-sizing: border-box !important;
}

/* Espacio entre wrapper de DataTables y siguientes elementos */
.dataTables_wrapper {
	margin-bottom: 20px !important;
}

/* =========================================================================
   NUEVO DISEÑO 2024 - MODERNIZACIÓN COMPONENTES BASE
   ========================================================================= */

/* 1. Modernización de Inputs y Selects */
.inputForm,
.inputFormPassword,
input[type="text"].inputForm,
select.inputForm {
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	padding: 0 12px;
	height: 38px;
	/* Igual que inputs */
	font-size: 14px;
	transition: all 0.3s ease;
	background-color: #F9FAFB;
	box-sizing: border-box;
	width: 100%;
	/* Por defecto 100% dentro de su contenedor flex */
}

.inputForm:focus,
.inputFormPassword:focus {
	border-color: #D8262F;
	background-color: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(216, 38, 47, 0.1);
	outline: none;
}

/* 2. Modernización de Etiquetas */
.labelForm {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #4B5563;
	margin-bottom: 4px;
	display: block;
	text-align: left !important;
}

/* 3. Modernización de Botón Rojo (Buscar/Asignar) */
.botonEditar {
	background: #D8262F;
	border-radius: 12px;
	height: 38px;
	/* Igual que inputs */
	padding: 0 25px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.2s ease;
	border: none;
	box-shadow: 0 2px 4px rgba(216, 38, 47, 0.2);
	width: auto;
	color: white !important;
	cursor: pointer;
}

.botonEditar:hover {
	background: #B91C1C;
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(216, 38, 47, 0.3);
}

/* 4. Modernización de Tarjeta de Formulario (Cards) - SOLO para formularios laterales */
.card .tablaFormulario,
table[style*="width: 28%"] .tablaFormulario,
table[align="right"] .tablaFormulario,
#divAsignarAlumno .tablaFormulario,
#formAsignarAlumnoCursoB2B .tablaFormulario,
#formIncremento .tablaFormulario {
	background: #FFFFFF;
	border-radius: 16px;
	border: 1px solid #E5E7EB;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	padding: 15px;
	margin-top: 15px;
	border-collapse: separate;
	overflow: hidden;
	border-spacing: 0;
}

.card .tablaFormulario,
.card .tablaFormulario tr,
.card .tablaFormulario td,
#formAsignarAlumnoCursoB2B .tablaFormulario,
#formAsignarAlumnoCursoB2B .tablaFormulario tr,
#formAsignarAlumnoCursoB2B .tablaFormulario td,
#formIncremento .tablaFormulario,
#formIncremento .tablaFormulario tr,
#formIncremento .tablaFormulario td {
	border: none !important;
	background: transparent !important;
}

.card .tablaFormulario td,
#formAsignarAlumnoCursoB2B .tablaFormulario td,
#formIncremento .tablaFormulario td {
	padding: 8px !important;
}

/* Encabezado de las Cards laterales */
.card .tablaFormulario th,
#formAsignarAlumnoCursoB2B .tablaFormulario th,
#formIncremento .tablaFormulario th {
	background: #D8262F;
	color: white;
	font-size: 14px;
	text-transform: uppercase;
	padding: 12px;
	border-radius: 0;
}

/* Forzar diseño vertical SOLO en formularios laterales */
.card .tablaFormulario tr,
#formAsignarAlumnoCursoB2B .tablaFormulario tr,
#formIncremento .tablaFormulario tr {
	display: flex !important;
	flex-direction: column !important;
}

.card .tablaFormulario td,
#formAsignarAlumnoCursoB2B .tablaFormulario td,
#formIncremento .tablaFormulario td {
	display: block !important;
	width: 100% !important;
}

/* Selects e inputs en formularios laterales - ancho completo */
.card .tablaFormulario .inputForm,
#formAsignarAlumnoCursoB2B .tablaFormulario .inputForm,
#formIncremento .tablaFormulario .inputForm,
.card .tablaFormulario select,
#formAsignarAlumnoCursoB2B .tablaFormulario select,
#formIncremento .tablaFormulario select {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid #D1D5DB !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	height: 40px !important;
	font-size: 14px !important;
	background-color: #F9FAFB !important;
	transition: all 0.3s ease !important;
}

.card .tablaFormulario .inputForm:focus,
#formAsignarAlumnoCursoB2B .tablaFormulario .inputForm:focus,
#formIncremento .tablaFormulario .inputForm:focus,
.card .tablaFormulario select:focus,
#formAsignarAlumnoCursoB2B .tablaFormulario select:focus,
#formIncremento .tablaFormulario select:focus {
	border-color: #D8262F !important;
	background-color: #FFFFFF !important;
	box-shadow: 0 0 0 3px rgba(216, 38, 47, 0.1) !important;
	outline: none !important;
}

/* =========================================================================
   FORMULARIOS DE BÚSQUEDA HORIZONTALES - Layout flex limpio
   ========================================================================= */

/* Contenedor principal de formularios de búsqueda */
.divTablaFormulario {
	width: calc(100% - 20px) !important;
	max-width: none !important;
	margin: 20px auto !important;
	padding: 0 !important;
}

/* Tabla del formulario como card */
.divTablaFormulario .tablaFormulario,
#formPagosFraudulentos .tablaFormulario,
#formPagosFraudulentosBloqueo .tablaFormulario,
#formBusquedaAlumno .tablaFormulario,
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario,
form[action*="inicioDevoluciones"] .tablaFormulario,
form[action*="datosFiscalesAlumno"] .tablaFormulario,
form[action*="bloqueoPagoAlumno"] .tablaFormulario,
table.tablaFormulario[style*="max-width: 600px"],
table.tablaFormulario[style*="max-width: 800px"],
table.tablaFormulario[style*="width: 80%"][style*="max-width: 600px"],
table.tablaFormulario[style*="width: 50%"][style*="max-width: 600px"] {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 15px auto !important;
	background: white !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
	border: 1px solid #e5e7eb !important;
	padding: 0 !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

/* Forzar que tablas padre de formularios de búsqueda usen ancho completo */
table:has(#formBusquedaAlumno),
table:has(form[action*="buscarCuponesAlumnosAccion"]),
table:has(form[action*="inicioDevoluciones"]),
table:has(form[action*="datosFiscalesAlumno"]),
table:has(form[action*="bloqueoPagoAlumno"]) {
	width: calc(100% - 20px) !important;
	max-width: none !important;
	margin: 20px auto !important;
}

/* tbody como contenedor flex horizontal */
.divTablaFormulario .tablaFormulario tbody,
#formPagosFraudulentos .tablaFormulario tbody,
#formPagosFraudulentosBloqueo .tablaFormulario tbody,
#formBusquedaAlumno .tablaFormulario tbody,
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario tbody,
form[action*="inicioDevoluciones"] .tablaFormulario tbody,
form[action*="datosFiscalesAlumno"] .tablaFormulario tbody,
form[action*="bloqueoPagoAlumno"] .tablaFormulario tbody,
table.tablaFormulario[style*="max-width: 600px"] tbody,
table.tablaFormulario[style*="max-width: 800px"] tbody,
table.tablaFormulario[style*="width: 80%"][style*="max-width: 600px"] tbody,
table.tablaFormulario[style*="width: 50%"][style*="max-width: 600px"] tbody {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 20px !important;
	justify-content: flex-start !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* tr se disuelve para que las td participen directamente en el flex */
.divTablaFormulario .tablaFormulario tr,
#formPagosFraudulentos .tablaFormulario tr,
#formPagosFraudulentosBloqueo .tablaFormulario tr,
#formBusquedaAlumno .tablaFormulario tr,
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario tr,
form[action*="inicioDevoluciones"] .tablaFormulario tr,
form[action*="datosFiscalesAlumno"] .tablaFormulario tr,
form[action*="bloqueoPagoAlumno"] .tablaFormulario tr,
table.tablaFormulario[style*="max-width: 600px"] tr,
table.tablaFormulario[style*="max-width: 800px"] tr,
table.tablaFormulario[style*="width: 80%"][style*="max-width: 600px"] tr,
table.tablaFormulario[style*="width: 50%"][style*="max-width: 600px"] tr {
	display: contents !important;
}

/* Cada td es un item flex */
.divTablaFormulario .tablaFormulario td,
#formPagosFraudulentos .tablaFormulario td,
#formPagosFraudulentosBloqueo .tablaFormulario td,
#formBusquedaAlumno .tablaFormulario td,
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario td,
form[action*="inicioDevoluciones"] .tablaFormulario td,
form[action*="datosFiscalesAlumno"] .tablaFormulario td,
form[action*="bloqueoPagoAlumno"] .tablaFormulario td,
table.tablaFormulario[style*="max-width: 600px"] td,
table.tablaFormulario[style*="max-width: 800px"] td,
table.tablaFormulario[style*="width: 80%"][style*="max-width: 600px"] td,
table.tablaFormulario[style*="width: 50%"][style*="max-width: 600px"] td {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	min-width: auto !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	white-space: nowrap !important;
}

/* Celdas que contienen inputs - crecen para llenar espacio */
.divTablaFormulario .tablaFormulario td:has(.inputForm),
#formPagosFraudulentos .tablaFormulario td:has(.inputForm),
#formPagosFraudulentosBloqueo .tablaFormulario td:has(.inputForm),
#formBusquedaAlumno .tablaFormulario td:has(.inputForm),
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario td:has(.inputForm),
form[action*="inicioDevoluciones"] .tablaFormulario td:has(.inputForm),
form[action*="datosFiscalesAlumno"] .tablaFormulario td:has(.inputForm),
form[action*="bloqueoPagoAlumno"] .tablaFormulario td:has(.inputForm),
table.tablaFormulario[style*="max-width: 600px"] td:has(.inputForm),
table.tablaFormulario[style*="max-width: 800px"] td:has(.inputForm) {
	flex: 1 1 100px !important;
	min-width: 100px !important;
}

/* Celdas que solo contienen label - no crecen */
.divTablaFormulario .tablaFormulario td:has(.labelForm):not(:has(.inputForm)),
#formPagosFraudulentos .tablaFormulario td:has(.labelForm):not(:has(.inputForm)),
#formPagosFraudulentosBloqueo .tablaFormulario td:has(.labelForm):not(:has(.inputForm)),
#formBusquedaAlumno .tablaFormulario td:has(.labelForm):not(:has(.inputForm)),
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario td:has(.labelForm):not(:has(.inputForm)),
form[action*="inicioDevoluciones"] .tablaFormulario td:has(.labelForm):not(:has(.inputForm)),
form[action*="datosFiscalesAlumno"] .tablaFormulario td:has(.labelForm):not(:has(.inputForm)),
form[action*="bloqueoPagoAlumno"] .tablaFormulario td:has(.labelForm):not(:has(.inputForm)),
table.tablaFormulario[style*="max-width: 600px"] td:has(.labelForm):not(:has(.inputForm)),
table.tablaFormulario[style*="max-width: 800px"] td:has(.labelForm):not(:has(.inputForm)) {
	flex: 0 0 auto !important;
	min-width: auto !important;
}

/* Celda que contiene el botón - no crecer, alinearse al final */
.divTablaFormulario .tablaFormulario td:has(.botonEditar),
#formPagosFraudulentos .tablaFormulario td:has(.botonEditar),
#formPagosFraudulentosBloqueo .tablaFormulario td:has(.botonEditar),
#formBusquedaAlumno .tablaFormulario td:has(.botonEditar),
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario td:has(.botonEditar),
form[action*="inicioDevoluciones"] .tablaFormulario td:has(.botonEditar),
form[action*="datosFiscalesAlumno"] .tablaFormulario td:has(.botonEditar),
form[action*="bloqueoPagoAlumno"] .tablaFormulario td:has(.botonEditar),
table.tablaFormulario[style*="max-width: 600px"] td:has(.botonEditar),
table.tablaFormulario[style*="max-width: 800px"] td:has(.botonEditar),
table.tablaFormulario[style*="width: 80%"][style*="max-width: 600px"] td:has(.botonEditar),
table.tablaFormulario[style*="width: 50%"][style*="max-width: 600px"] td:has(.botonEditar) {
	flex: 0 0 auto !important;
	min-width: 130px !important;
	align-items: stretch !important;
	justify-content: flex-end !important;
}

/* Headers de formularios de búsqueda - ocultar */
.divTablaFormulario .tablaFormulario th,
#formPagosFraudulentos .tablaFormulario th,
#formPagosFraudulentosBloqueo .tablaFormulario th,
#formBusquedaAlumno .tablaFormulario th,
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario th,
form[action*="inicioDevoluciones"] .tablaFormulario th,
form[action*="datosFiscalesAlumno"] .tablaFormulario th,
form[action*="bloqueoPagoAlumno"] .tablaFormulario th,
table.tablaFormulario[style*="max-width: 600px"] th,
table.tablaFormulario[style*="max-width: 800px"] th,
table.tablaFormulario[style*="width: 80%"][style*="max-width: 600px"] th,
table.tablaFormulario[style*="width: 50%"][style*="max-width: 600px"] th {
	display: none !important;
}

/* Botón de búsqueda - visible y alineado con los inputs */
.divTablaFormulario .tablaFormulario .botonEditar,
.divTablaFormulario .tablaFormulario button.botonEditar,
#formPagosFraudulentos .tablaFormulario .botonEditar,
#formPagosFraudulentosBloqueo .tablaFormulario .botonEditar,
#formBusquedaAlumno .tablaFormulario .botonEditar,
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario .botonEditar,
form[action*="inicioDevoluciones"] .tablaFormulario .botonEditar,
form[action*="datosFiscalesAlumno"] .tablaFormulario .botonEditar,
form[action*="bloqueoPagoAlumno"] .tablaFormulario .botonEditar,
table.tablaFormulario[style*="max-width: 600px"] .botonEditar,
table.tablaFormulario[style*="max-width: 800px"] .botonEditar {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	min-width: 120px !important;
	height: 38px !important;
	margin: 0 !important;
	position: relative !important;
	z-index: 10 !important;
	background: #D8262F !important;
	color: white !important;
	border: none !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	box-shadow: 0 2px 4px rgba(216, 38, 47, 0.2) !important;
	transition: all 0.2s ease !important;
}

/* Inputs dentro del buscador - ocupar todo el ancho de su celda */
.divTablaFormulario .tablaFormulario .inputForm,
#formPagosFraudulentos .tablaFormulario .inputForm,
#formPagosFraudulentosBloqueo .tablaFormulario .inputForm,
#formBusquedaAlumno .tablaFormulario .inputForm,
form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario .inputForm,
form[action*="inicioDevoluciones"] .tablaFormulario .inputForm,
form[action*="datosFiscalesAlumno"] .tablaFormulario .inputForm,
form[action*="bloqueoPagoAlumno"] .tablaFormulario .inputForm,
table.tablaFormulario[style*="max-width: 600px"] .inputForm,
table.tablaFormulario[style*="max-width: 800px"] .inputForm {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Responsive: En móvil, todo vertical */
@media (max-width: 768px) {

	.divTablaFormulario .tablaFormulario tbody,
	#formPagosFraudulentos .tablaFormulario tbody,
	#formPagosFraudulentosBloqueo .tablaFormulario tbody,
	#formBusquedaAlumno .tablaFormulario tbody,
	form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario tbody,
	form[action*="inicioDevoluciones"] .tablaFormulario tbody,
	form[action*="datosFiscalesAlumno"] .tablaFormulario tbody,
	form[action*="bloqueoPagoAlumno"] .tablaFormulario tbody,
	table.tablaFormulario[style*="max-width: 600px"] tbody,
	table.tablaFormulario[style*="max-width: 800px"] tbody {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}

	.divTablaFormulario .tablaFormulario td,
	#formPagosFraudulentos .tablaFormulario td,
	#formPagosFraudulentosBloqueo .tablaFormulario td,
	#formBusquedaAlumno .tablaFormulario td,
	form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario td,
	form[action*="inicioDevoluciones"] .tablaFormulario td,
	form[action*="datosFiscalesAlumno"] .tablaFormulario td,
	form[action*="bloqueoPagoAlumno"] .tablaFormulario td,
	table.tablaFormulario[style*="max-width: 600px"] td,
	table.tablaFormulario[style*="max-width: 800px"] td {
		min-width: auto !important;
		width: 100% !important;
		flex: 1 1 100% !important;
	}

	.divTablaFormulario .tablaFormulario .botonEditar,
	.divTablaFormulario .tablaFormulario button.botonEditar,
	#formPagosFraudulentos .tablaFormulario .botonEditar,
	#formPagosFraudulentosBloqueo .tablaFormulario .botonEditar,
	#formBusquedaAlumno .tablaFormulario .botonEditar,
	form[action*="buscarCuponesAlumnosAccion"] .tablaFormulario .botonEditar,
	form[action*="inicioDevoluciones"] .tablaFormulario .botonEditar,
	form[action*="datosFiscalesAlumno"] .tablaFormulario .botonEditar,
	form[action*="bloqueoPagoAlumno"] .tablaFormulario .botonEditar,
	table.tablaFormulario[style*="max-width: 600px"] .botonEditar,
	table.tablaFormulario[style*="max-width: 800px"] .botonEditar {
		width: 100% !important;
	}
}



/* =========================================================================
   PÁGINA ASIGNAR ALUMNO CURSO B2B - Layout de dos columnas
   ========================================================================= */

/* Contenedor principal - layout de dos columnas sin bordes */
.table100.ver2>table {
	width: 100% !important;
	table-layout: auto !important;
	/* auto para permitir que se expandan las columnas según contenido */
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	border: none !important;
}

/* Eliminar TODOS los bordes de las celdas del layout exterior */
.table100.ver2>table>tbody>tr>td {
	border: none !important;
	vertical-align: top !important;
}

/* Columna izquierda - Tabla de cursos */
.table100.ver2>table>tbody>tr>td:first-child {
	width: 65% !important;
	padding-right: 20px !important;
	padding-top: 0 !important;
}

/* Columna separadora - ocultar */
.table100.ver2>table>tbody>tr>td:nth-child(2) {
	display: none !important;
	width: 0 !important;
	padding: 0 !important;
}

/* Columna derecha - Formulario */
.table100.ver2>table>tbody>tr>td:last-child {
	width: 35% !important;
	min-width: 350px !important;
	/* min-width para evitar el efecto 'apachurrado' */
	padding-left: 0 !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

#formAsignarAlumnoCursoB2B .tablaFormulario,
#formIncremento .tablaFormulario {
	margin-top: 0 !important;
}

/* Tabla de cursos (izquierda) - Estilos específicos */
.table100.ver2 .datatableSIS {
	width: 100% !important;
	border-collapse: collapse !important;
	background: white !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Headers de la tabla de cursos */
.table100.ver2 .datatableSIS thead th {
	background: #D8262F !important;
	color: white !important;
	font-weight: bold !important;
	padding: 12px !important;
	text-align: center !important;
	border: none !important;
}

/* Celdas de la tabla de cursos */
.table100.ver2 .datatableSIS tbody td {
	padding: 8px !important;
	border-bottom: 1px solid #f3f4f6 !important;
	vertical-align: middle !important;
}

/* Filas alternadas en tabla de cursos */
.table100.ver2 .datatableSIS tbody tr:nth-child(even) {
	background-color: #f8f9fa !important;
}

.table100.ver2 .datatableSIS tbody tr:nth-child(odd) {
	background-color: white !important;
}

/* Hover en filas de tabla de cursos */
.table100.ver2 .datatableSIS tbody tr:hover {
	background-color: #f3f4f6 !important;
}

/* Formulario lateral (derecha) - Evitar estilos de card problemáticos */
#formAsignarAlumnoCursoB2B .tablaFormulario {
	background: white !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
	border: 1px solid #e5e7eb !important;
	padding: 20px !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Mantener estructura vertical en formulario lateral */
#formAsignarAlumnoCursoB2B .tablaFormulario tbody {
	display: block !important;
}

#formAsignarAlumnoCursoB2B .tablaFormulario tr {
	display: flex !important;
	flex-direction: column !important;
	margin-bottom: 15px !important;
	width: 100% !important;
}

#formAsignarAlumnoCursoB2B .tablaFormulario td {
	display: block !important;
	width: 100% !important;
	padding: 8px 0 !important;
}

/* Header del formulario */
#formAsignarAlumnoCursoB2B .tablaFormulario th {
	background: #D8262F !important;
	color: white !important;
	text-align: center !important;
	padding: 15px !important;
	font-size: 16px !important;
	font-weight: bold !important;
	border-radius: 12px 12px 0 0 !important;
	margin: -20px -20px 20px -20px !important;
}

/* Botón Asignar - Asegurar visibilidad */
#formAsignarAlumnoCursoB2B .botonEditar {
	width: 100% !important;
	margin-top: 20px !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Tabla de cursos seleccionados */
#textTablaCursos {
	display: block !important;
	text-align: center !important;
	font-size: 18px !important;
	font-weight: bold !important;
	color: #374151 !important;
	margin: 20px 0 15px 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
}

#tablaAsignacionCursos {
	width: 100% !important;
	border-collapse: collapse !important;
	background: white !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	margin-top: 10px !important;
}

#tablaAsignacionCursos thead th {
	background: #D8262F !important;
	color: white !important;
	font-weight: bold !important;
	padding: 10px !important;
	text-align: center !important;
	border: none !important;
}

#tablaAsignacionCursos tbody td {
	padding: 10px !important;
	border-bottom: 1px solid #f3f4f6 !important;
	text-align: center !important;
}

/* =========================================================================
   PÁGINA ASIGNAR GRUPO ALUMNO B2B - Layout de dos columnas (similar a asignar curso)
   ========================================================================= */

/* Formulario lateral (derecha) - Asignar Grupo Alumno */
#formIncremento .tablaFormulario {
	background: white !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
	border: 1px solid #e5e7eb !important;
	padding: 20px !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Mantener estructura vertical en formulario lateral */
#formIncremento .tablaFormulario tbody {
	display: block !important;
}

#formIncremento .tablaFormulario tr {
	display: flex !important;
	flex-direction: column !important;
	margin-bottom: 15px !important;
	width: 100% !important;
}

#formIncremento .tablaFormulario td {
	display: block !important;
	width: 100% !important;
	padding: 8px 0 !important;
}

/* Header del formulario */
#formIncremento .tablaFormulario th {
	background: #D8262F !important;
	color: white !important;
	text-align: center !important;
	padding: 15px !important;
	font-size: 16px !important;
	font-weight: bold !important;
	border-radius: 12px 12px 0 0 !important;
	margin: -20px -20px 20px -20px !important;
}

/* Botón Asignar - Asegurar visibilidad */
#formIncremento .botonEditar {
	width: 100% !important;
	margin-top: 20px !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Tabla de alumnos seleccionados */
#textTabla {
	display: block !important;
	text-align: center !important;
	font-size: 18px !important;
	font-weight: bold !important;
	color: #374151 !important;
	margin: 20px 0 15px 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
}

#tablaAsignacion {
	width: 100% !important;
	border-collapse: collapse !important;
	background: white !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	margin-top: 10px !important;
}

#tablaAsignacion thead th {
	background: #D8262F !important;
	color: white !important;
	font-weight: bold !important;
	padding: 10px !important;
	text-align: center !important;
	border: none !important;
}

#tablaAsignacion tbody td {
	padding: 10px !important;
	border-bottom: 1px solid #f3f4f6 !important;
	text-align: center !important;
}

/* =========================================================================
   RESPONSIVE DESIGN
   ========================================================================= */

/* Tablet y pantallas medianas */
@media (max-width: 1024px) {
	.table100.ver2>table>tbody>tr>td:first-child {
		width: 60% !important;
	}

	.table100.ver2>table>tbody>tr>td:last-child {
		width: 37% !important;
	}
}

/* Móviles - Cambiar a layout vertical */
@media (max-width: 768px) {

	.table100.ver2>table,
	.table100.ver2>table>tbody,
	.table100.ver2>table>tbody>tr {
		display: block !important;
		width: 100% !important;
	}

	.table100.ver2>table>tbody>tr>td {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		margin-bottom: 20px !important;
	}

	/* Ocultar columna separadora en móvil */
	.table100.ver2>table>tbody>tr>td:nth-child(2) {
		display: none !important;
	}
}