/* ===== ESTILOS BASE (MOBILE FIRST) ===== */
@font-face {
	font-family: 'Visby Round CF';
	src: url('portal/fonts/VisbyRoundCF-Bold.woff2') format('woff2'), url('portal/fonts/VisbyRoundCF-Bold.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: #FFB03A #f3f3f3; /* Firefox */
}

.*::-webkit-scrollbar {
	width: 8px;
	background: #f3f3f3;
	border-radius: 8px;
}

.*::-webkit-scrollbar-thumb {
	background: #FFB03A;
	border-radius: 8px;
	border: 2px solid #f3f3f3;
}

	.*::-webkit-scrollbar-thumb:hover {
		background: #d63384;
	}


body {
	background-color: whitesmoke;
	text-align: center;
	font-family: 'Visby Round CF', Arial, sans-serif;
	padding: 10px;
}

.tab-content.active {
	display: block;
}

iframe {
	width: 100%;
	height: auto;
	min-height: 770px;
	border: 1px solid #F1F044;
	border-radius: 0.5rem;
	background-color: white;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	margin: 15px 0;
}

/* Encabezado */
.encabezado {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #47D5DF;
	padding: 15px;
	border-radius: 20px 20px 0 0;
	color: white;
	position: relative;
	min-height: 100px;
	gap: 20px;
	margin-bottom: 20px;
}

.icono {
	background-color: white;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.encabezado h1 {
	margin: 0;
	font-size: 40px;
	flex: 1;
	text-align: center;
}

/* Encabezado */
/* Botones */
.kawaii-btn {
	border: none;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	letter-spacing: 0.5px;
	padding: 8px 12px;
	min-height: 36px;
	text-align: center;
	/* Ya tienes estilos, solo asegúrate de que no crezca demasiado */
	flex-shrink: 0;
}

	.kawaii-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

.btn-create {
	background-color: #FE2491;
	background: rgba(254, 36, 145, 0.85); /* Transparente */
	color: white;
}

.kawaii-btn-tabla {
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	letter-spacing: 0.5px;
	padding: 8px 12px;
	text-align: center;
	/* Ya tienes estilos, solo asegúrate de que no crezca demasiado */
	flex-shrink: 0;
}

.btn-delete {
	background: rgba(255, 176, 58, 0.85); /* Transparente */
	color: white;
}

.btn-edit {
	background: rgba(254, 36, 145, 0.85); /* Transparente */

	color: white;
}

.btn-details {
	background-color: #fffe71;
	color: white;
}

	.kawaii-btn-tabla:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}


.btn-vermas {
	background-color: #47D5DF;
	
	color: white;
}

.btn-back {
	background-color: #FFB03A;
	color: white;
	z-index: 10;
	position: relative;
	text-decoration: none;
}

	.btn-back:hover {
		background-color: #FE2491;
		color: white;
		text-decoration: none;
	}

/* Botones */
/* ===== MEDIA QUERIES ===== */
/* === Mobile específico: iPhone 12/13 Pro (390x844) === */
@media (max-width: 420px) {
	.encabezado {
		flex-direction: column;
		gap: 10px;
		padding: 10px;
		min-height: unset;
	}

		.encabezado h1 {
			font-size: 1.5rem;
		}

	.kawaii-btn {
		width: 30%;
		justify-content: center;
		font-size: 1rem;
	}

	.btn-create {
		width:100%;
	}
}

/* === Tablets (como 768x1024) === */
@media (min-width: 421px) and (max-width: 1024px) {
	.encabezado h1 {
		font-size: 2rem;
	}

	.kawaii-btn {
		font-size: 1rem;
	}

	
}

/* === Laptops/Desktop (como 1440x900) === */
@media (min-width: 1025px) and (max-width: 1500px) {
	.encabezado h1 {
		font-size: 2.5rem;
	}

	
}


/* ===== MODAL EXCLUSIVO PARA ENVIAR MENSAJE ===== */
#modal-enviar {
	display: none; /* Se muestra con JS */
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(30, 30, 30, 0.35);
	justify-content: center;
	align-items: center;
	transition: background 0.2s;
}

	#modal-enviar .modal-content-enviar {
		background: #fff;
		border-radius: 18px;
		box-shadow: 0 8px 32px rgba(0,0,0,0.18);
		padding: 2.2rem 2.5rem 2rem 2.5rem;
		max-width: 380px;
		width: 90%;
		text-align: center;
		position: relative;
		border: 2.5px solid #FFB03A;
		animation: modalFadeIn 0.25s;
	}

	#modal-enviar h2 {
		color: #FE2491;
		font-size: 1.7rem;
		font-weight: bold;
		margin-bottom: 1.5rem;
		letter-spacing: 1px;
	}

	#modal-enviar .close-modal-enviar {
		position: absolute;
		top: 18px;
		right: 22px;
		font-size: 2rem;
		color: #FE2491;
		cursor: pointer;
		font-weight: bold;
		transition: color 0.2s;
		z-index: 2;
	}

		#modal-enviar .close-modal-enviar:hover {
			color: #FFB03A;
		}

	#modal-enviar .opciones-enviar {
		display: flex;
		flex-direction: row;
		gap: 1.2rem;
		justify-content: center;
		margin-top: 1.5rem;
	}

	#modal-enviar .opcion-enviar {
		background: #FFB03A;
		color: #FE2491;
		border: none;
		border-radius: 6px;
		padding: 0.7rem 1.5rem;
		font-size: 1.1rem;
		font-weight: bold;
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		transition: background 0.2s, color 0.2s;
	}

		#modal-enviar .opcion-enviar:hover {
			background: #FE2491;
			color: #fff;
		}

@keyframes modalFadeIn {
	from {
		transform: scale(0.95);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}
dx-license {
	display: none;
}

/* ===== ESTILOS PARA CXC DATAGRID ===== */
.datagrid-container {
    margin-top: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 15px;
}

.filter-bar {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.filter-bar label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
}

.button-bar {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.button-bar .btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.button-bar .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.kardex-style {
    line-height: 1.4;
    padding: 5px 0;
}

.kardex-style strong {
    color: #2c3e50;
    font-size: 13px;
}

.kardex-style .text-muted {
    color: #6c757d !important;
    font-size: 11px;
}

#cxcDataGrid .dx-datagrid-headers {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
}

#cxcDataGrid .dx-datagrid-headers .dx-header-row > td {
    border-color: rgba(255,255,255,0.2);
}

#cxcDataGrid .dx-group-row {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

#cxcDataGrid .dx-row-alt {
    background: #f8fffe;
}

#cxcDataGrid .dx-datagrid-summary-item {
    font-weight: 600;
    color: #2c3e50;
}

#cxcDataGrid .dx-datagrid-total-footer {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    font-weight: 700;
}

#cxcDataGrid .dx-datagrid-group-footer {
    background: #e9ecef;
    font-weight: 600;
    color: #495057;
}

.card {
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	margin-bottom: 1.5rem;
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	min-height: 60px;
	border-radius: 20px 20px 0 0;
}

	.card-header h4 {
		margin: 0;
		font-size: 1.3rem;
		font-weight: bold;
	}

.card-body {
	padding: 1.5rem;
}

	.card-body dl.row {
		margin-bottom: 0;
	}

	.card-body dt {
		font-weight: 600;
		color: #495057;
		margin-bottom: 0.5rem;
	}

	.card-body dd {
		color: #6c757d;
		margin-bottom: 0.5rem;
	}

.modal-content {
	border-radius: 20px;
	border: 3px solid #47D5DF;
	box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.modal-header {
	background: linear-gradient(135deg, #47D5DF 0%, #FE2491 100%);
	color: white;
	border-radius: 20px 20px 0 0;
	border-bottom: none;
}

	.modal-header .modal-title {
		font-weight: bold;
		font-size: 1.3rem;
	}

	.modal-header .close {
		color: white;
		opacity: 1;
		text-shadow: none;
		font-size: 2rem;
		transition: transform 0.2s;
	}

		.modal-header .close:hover {
			transform: scale(1.2);
		}

.modal-body {
	padding: 2rem;
}

	.modal-body .form-group label {
		font-weight: 600;
		color: #495057;
	}

	.modal-body .form-control {
		border-radius: 10px;
		border: 2px solid #e9ecef;
		transition: border-color 0.2s;
	}

		.modal-body .form-control:focus {
			border-color: #47D5DF;
			box-shadow: 0 0 0 0.2rem rgba(71, 213, 223, 0.25);
		}

	.modal-body .alert {
		border-radius: 10px;
	}

.modal-footer {
	padding: 1rem 2rem;
	border-top: 1px solid #e9ecef;
}

	.modal-footer .btn {
		border-radius: 20px;
		padding: 0.5rem 1.5rem;
		font-weight: 600;
	}

	.modal-footer .btn-secondary {
		background-color: #FFB03A;
		border-color: #FFB03A;
	}

		.modal-footer .btn-secondary:hover {
			background-color: #e69d2a;
			border-color: #e69d2a;
		}

	.modal-footer .btn-success {
		background-color: #47D5DF;
		border-color: #47D5DF;
	}

		.modal-footer .btn-success:hover {
			background-color: #3ab9c3;
			border-color: #3ab9c3;
		}
}