body {
	font-family: "Nunito sans", sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 10%;
	background-color: #711610;
	color: white;
}

.logo img {
	height: 50px;
}

nav ul {
	list-style: none;
	display: flex;
	gap: 0rem;
}

nav ul li a {
	color: white;
	text-decoration: none;
	font-size: 1rem;
	position: relative;
}

nav ul li a::after {
	content: "";
	position: absolute;
	width: 0;
	height: 2px;
	background-color: white;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: width 0.3s ease-in-out;
}

nav ul li a:hover::after, nav ul li a.active::after {
	width: 100%;
	left: 0;
	transform: translateX(0);
}

.login-btn a {
	background-color: #fff;
	padding: 8px 40px;
	border-radius: 20px;
	color: black;
	text-decoration: none;
	font-size: 1rem;
}

.login-btn a:hover {
	background-color: #ca0606;
	color: white;
	font-weight: bold;
}

.hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #711610;
	color: white;
	padding: 0rem 8rem;
	position: relative;
}

.hero-content, .hero-image {
	flex: 1;
}

.hero h1 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.search-container {
	display: flex;
	align-items: center;
	background-color: white;
	border-radius: 20px;
	overflow: hidden;
}

.search-container input {
	border: 0;
	padding: 1rem;
	font-size: 1rem;
	flex-grow: 2;
}

.search-container button {
	background-color: white;
	border: none;
	padding: 0.6rem;
	cursor: pointer;
}

.search-container button img {
	width: 35px;
	height: auto;
}

.hero-image {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.hero-image img {
	width: 100%;
	height: auto;
	max-width: 400px; /* Ajusta el tamaño máximo según sea necesario */
}

.watermark {
	position: absolute;
	top: 47.5%;
	left: 52%;
	transform: translate(-50%, -50%);
	opacity: 1;
}

.watermark img {
	width: 85%;
	height: auto;
}

.videocap h1 {
	text-align: center;
}

footer {
	background-color: gray;
	color: white;
	text-align: center;
	padding: 1rem 0;
	position: relative;
	width: 100%;
	bottom: 0;
}

/* Responsive styles */
@media ( max-width : 768px) {
	nav ul {
		display: none;
	}
	.logo-img {
		display: none;
	}
	.user-icon {
		display: block;
	}
	nav ul li .login-btn {
		display: inline-block;
	}
	.hero {
		flex-direction: column;
		align-items: flex-start;
	}
	.hero-content {
		max-width: 100%;
	}
	.hero-image {
		max-width: 100%;
	}
	.hero-image img {
		display: none;
	}
}

/* Ajustes en styles.css */
.search-results {
	max-height: 300px;
	overflow-y: auto;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.list-group-item {
	cursor: pointer;
	padding: 10px 15px;
}

.list-group-item:hover {
	background-color: #f8f9fa;
}

.modal-body {
	position: relative;
}

.input-group-text {
	background-color: #fff;
	border-right: 0;
}

.form-control {
	border-left: 0;
}

.search-container {
	position: relative;
	width: 100%;
	max-width: 500px; /* Ajusta el ancho según sea necesario */
}

.input-group {
	border: 1px solid black;
	border-radius: 4px;
	overflow: hidden;
}

.input-group-text {
	background-color: white;
	border: none;
	padding-left: 10px;
}

.form-control {
	border: none;
	box-shadow: none;
	height: 40px;
}

.search-results {
	max-height: 300px;
	overflow-y: auto;
	background-color: #fff;
	border: 1px solid black;
	border-radius: 4px;
	z-index: 1000;
	margin-top: 5px;
}

.list-group-item {
	cursor: pointer;
	padding: 10px 15px;
	border: none;
}

.list-group-item:hover, .list-group-item.active {
	background-color: #007bff;
	color: white;
}

.form-check-label {
	font-size: 14px;
}

.display-6 {
	font-size: 20px;
	font-weight: bold;
}

.form-check-input:checked {
	background-color: #007bff;
	border-color: #007bff;
}

.search-results {
	max-height: 300px;
	overflow-y: auto;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.list-group-item {
	cursor: pointer;
	padding: 10px 15px;
}

.list-group-item:hover, .list-group-item.active {
	background-color: #007bff;
	color: white;
}

.input-group-text {
	background-color: #fff;
	border-right: 0;
}

.form-control {
	border-left: 0;
}

.modal-body {
	position: relative;
}

/* Asegurarte de que los inputs tengan un borde visible */
.form-control {
	border: 1px solid #ced4da;
	padding: 10px;
	font-size: 14px;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border-radius: 0.5rem;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Asegúrate de que el texto dentro de los inputs sea visible */
.form-control::placeholder {
	color: #6c757d;
	opacity: 1; /* Firefox */
}

/* Asegúrate de que los inputs no estén ocultos */
.form-control:focus {
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Estilos para el botón */
.btn-primary {
	border-radius: 0.5rem;
    background: #6b1a1a;
    color: #ffffff;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    box-shadow: 0 2px 6px rgba(107, 26, 26, 0.3);
    transition: opacity 0.15s, transform 0.1s;
}

.btn-primary:hover {
	background-color: #6b1a1a;
	border-color: #6b1a1a;
}

/* Estilos específicos para los campos dentro del modal */
.modal-content {
	padding: 20px;
}

.modal-header {
	border-bottom: 1px solid #dee2e6;
}

.modal-title {
	font-size: 18px;
	color: #343a40;
}

.modal-body {
	padding-top: 10px;
}

label.form-label {
	font-size: 14px;
	font-weight: 600;
	color: #495057;
}

.form-container {
	margin: 20px auto;
	padding: 20px;
	background-color: #f8f9fa;
	border-radius: 8px;
	max-width: 800px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-title {
	margin-bottom: 20px;
	text-align: center;
}

.form-floating-label {
	position: relative;
	margin-bottom: 20px;
}

.form-floating-label label {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	background-color: white;
	padding: 0 5px;
	transition: 0.2s ease all;
	pointer-events: none;
	color: #9e9e9e;
}

.form-floating-label input:focus ~ label, .form-floating-label input:not(:placeholder-shown) 
	~ label, .form-floating-label select:focus ~ label,
	.form-floating-label select:not([value=""]) ~ label {
	top: -10px;
	left: 10px;
	color: #d71920;
	font-size: 12px;
}

.form-floating-label input, .form-floating-label select {
	width: 100%;
	padding: 12px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: white;
	appearance: none;
}

.hidden {
	display: none;
}
.serviciotable {
	font-size: 0.8rem;
	font-family: "Segoe UI";
}

.hitorialtable {
	font-size: 0.8rem;
	font-family: "Segoe UI";
}
.custom-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1060; /* Asegúrate de que sea mayor que el del modal (1050) */
}


/* usuarios.css */

/* ---- Variables del tema ---- */
:root {
  --pagalo-primary: #711610;
  --pagalo-primary-dark: #5a120d;
  --pagalo-primary-light: #8b1d15;
  --pagalo-primary-bg: rgba(113, 22, 16, 0.06);
  --pagalo-primary-bg-hover: rgba(113, 22, 16, 0.1);
  --pagalo-success: #198754;
  --pagalo-danger: #dc3545;
  --pagalo-warning: #856404;
  --pagalo-info: #084298;
  --pagalo-text: #1a1d20;
  --pagalo-text-muted: #6c757d;
  --pagalo-border: #dee2e6;
  --pagalo-bg-light: #f8f9fa;
  --pagalo-radius: 0.5rem;
  --pagalo-radius-lg: 0.75rem;
  --pagalo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --pagalo-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --pagalo-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --pagalo-transition: 0.2s ease;
}

/* ---- Reset base modulo ---- */
.container-fluid.px-4.py-4 {
  font-family: "Nunito Sans", sans-serif;
}

/* ============================================
   STATS CARDS
   ============================================ */
.card.border-0.shadow-sm {
  border-radius: var(--pagalo-radius-lg) !important;
  transition: transform var(--pagalo-transition), box-shadow var(--pagalo-transition);
}

.card.border-0.shadow-sm:hover {
  transform: translateY(-1px);
  box-shadow: var(--pagalo-shadow) !important;
}

.card-body h5.fw-bold {
  color: var(--pagalo-text);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

/* ============================================
   BOTON PRINCIPAL
   ============================================ */
.btn[style*="background-color: #711610"],
.btn-pagalo {
  background-color: var(--pagalo-primary) !important;
  border-color: var(--pagalo-primary) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--pagalo-radius);
  transition: all var(--pagalo-transition);
}

.btn[style*="background-color: #711610"]:hover,
.btn-pagalo:hover {
  background-color: var(--pagalo-primary-dark) !important;
  border-color: var(--pagalo-primary-dark) !important;
  box-shadow: 0 2px 6px rgba(113, 22, 16, 0.3);
  transform: translateY(-1px);
}

.btn[style*="background-color: #711610"]:active,
.btn-pagalo:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn[style*="background-color: #711610"]:disabled,
.btn-pagalo:disabled {
  opacity: 0.65;
  pointer-events: none;
}

/* ============================================
   FILTROS Y BUSQUEDA
   ============================================ */
#searchInput {
  border-left: none !important;
  font-size: 0.875rem;
}

#searchInput:focus {
  box-shadow: none;
  border-color: var(--pagalo-primary);
}

#searchInput:focus + .input-group-text,
.input-group:focus-within .input-group-text {
  border-color: var(--pagalo-primary);
}

.input-group-text {
  border-right: none;
  background-color: #fff;
}

.form-select:focus {
  border-color: var(--pagalo-primary);
  box-shadow: 0 0 0 0.2rem rgba(113, 22, 16, 0.15);
}

.form-select.form-select-sm {
  font-size: 0.85rem;
  border-radius: var(--pagalo-radius);
}

/* ============================================
   TABLA DE USUARIOS
   ============================================ */
#usersTable {
  font-size: 0.85rem;
}

#usersTable thead th {
  background-color: var(--pagalo-bg-light) !important;
  color: var(--pagalo-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--pagalo-border);
  white-space: nowrap;
}

#usersTable tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-color: #f0f0f0;
}

#usersTable tbody tr {
  transition: background-color var(--pagalo-transition);
}

#usersTable tbody tr:hover {
  background-color: var(--pagalo-primary-bg) !important;
}

/* Avatar circular en la tabla */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  flex-shrink: 0;
}

.user-avatar.admin-fac {
  background-color: #cfe2ff;
  color: var(--pagalo-info);
}

.user-avatar.superadmin {
  background-color: #fff3cd;
  color: var(--pagalo-warning);
}

/* ============================================
   BADGES ROLES
   ============================================ */
.badge-superadmin {
  background-color: #fff3cd;
  color: #856404;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.3em 0.65em;
  border-radius: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-admin-fac {
  background-color: #cfe2ff;
  color: #084298;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.3em 0.65em;
  border-radius: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============================================
   BADGES ESTADO
   ============================================ */
.badge-activo {
  background-color: #d1e7dd;
  color: #0f5132;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.3em 0.65em;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-activo::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--pagalo-success);
  border-radius: 50%;
  animation: pulseGreen 2s infinite;
}

.badge-inactivo {
  background-color: #f8d7da;
  color: #842029;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.3em 0.65em;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-inactivo::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--pagalo-danger);
  border-radius: 50%;
}

@keyframes pulseGreen {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================
   BADGES FACULTAD
   ============================================ */
.badge-facultad {
  background-color: #e9ecef;
  color: #495057;
  font-weight: 500;
  font-size: 0.68rem;
  padding: 0.2em 0.5em;
  border-radius: 0.3rem;
  display: inline-block;
  margin: 1px 2px;
}

.badge-facultad-more {
  background-color: var(--pagalo-primary-bg);
  color: var(--pagalo-primary);
  font-weight: 600;
  font-size: 0.68rem;
  padding: 0.2em 0.5em;
  border-radius: 0.3rem;
  cursor: pointer;
}

.badge-facultad-more:hover {
  background-color: var(--pagalo-primary-bg-hover);
}

/* ============================================
   BOTONES ACCION TABLA
   ============================================ */
.btn-action {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pagalo-radius);
  border: 1px solid transparent;
  background: transparent;
  transition: all var(--pagalo-transition);
  font-size: 0.8rem;
}

.btn-action:hover {
  transform: scale(1.1);
}

.btn-action.edit {
  color: var(--pagalo-info);
}
.btn-action.edit:hover {
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}

.btn-action.key {
  color: var(--pagalo-primary);
}
.btn-action.key:hover {
  background-color: var(--pagalo-primary-bg);
  border-color: var(--pagalo-primary);
}

.btn-action.toggle {
  color: var(--pagalo-warning);
}
.btn-action.toggle:hover {
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.btn-action.delete {
  color: var(--pagalo-danger);
}
.btn-action.delete:hover {
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

/* ============================================
   MODALES
   ============================================ */
.modal-content {
  border: none;
  border-radius: var(--pagalo-radius-lg);
  box-shadow: var(--pagalo-shadow-lg);
}

.modal-header {
  border-bottom: 2px solid var(--pagalo-primary) !important;
  padding: 1rem 1.25rem;
}

.modal-header .modal-title {
  color: var(--pagalo-primary);
  font-weight: 700;
  font-size: 1rem;
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  border-top: 1px solid #f0f0f0;
  padding: 0.75rem 1.25rem;
}

/* ============================================
   FORMULARIO DENTRO DEL MODAL
   ============================================ */
#userForm .form-control,
#userForm .form-select {
  border: 1px solid var(--pagalo-border);
  border-radius: var(--pagalo-radius);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  transition: border-color var(--pagalo-transition), box-shadow var(--pagalo-transition);
  background-color: #fff;
  color: var(--pagalo-text);
}

#userForm .form-control:focus,
#userForm .form-select:focus {
  border-color: var(--pagalo-primary);
  box-shadow: 0 0 0 0.2rem rgba(113, 22, 16, 0.15);
  outline: none;
}

#userForm .form-control.is-invalid,
#userForm .form-select.is-invalid {
  border-color: var(--pagalo-danger);
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

#userForm .form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.35rem;
}

#userForm .form-label .text-danger {
  color: var(--pagalo-danger) !important;
}

#userForm .invalid-feedback {
  font-size: 0.75rem;
}

/* Secciones del form - dot decorative */
#userForm h6 .me-2[style] {
  vertical-align: middle;
}

/* ============================================
   SECCION ASIGNACION FACULTADES
   ============================================ */
#facultadesSection {
  transition: opacity var(--pagalo-transition);
}

#facultadesSection.disabled-section {
  opacity: 0.4;
  pointer-events: none;
}

/* Badges seleccionados */
#selectedFacultadesBadges .badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35em 0.7em;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: var(--pagalo-primary) !important;
  color: #fff;
  animation: fadeInBadge 0.2s ease;
}

#selectedFacultadesBadges .badge .btn-close-badge {
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.65rem;
  margin-left: 2px;
  transition: opacity var(--pagalo-transition);
}

#selectedFacultadesBadges .badge .btn-close-badge:hover {
  opacity: 1;
}

@keyframes fadeInBadge {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Lista de checkboxes facultades */
#facultadesListContainer {
  border: 1px solid var(--pagalo-border) !important;
  border-radius: var(--pagalo-radius) !important;
  background-color: #fff;
}

#facultadesListContainer .bg-light {
  background-color: #f8f9fa !important;
  position: sticky;
  top: 0;
  z-index: 2;
}

#facultadesListContainer .form-check {
  padding: 0.45rem 0.75rem 0.45rem 2.2rem;
  margin: 0;
  transition: background-color var(--pagalo-transition);
  border-bottom: 1px solid #f5f5f5;
}

#facultadesListContainer .form-check:last-child {
  border-bottom: none;
}

#facultadesListContainer .form-check:hover {
  background-color: var(--pagalo-primary-bg);
}

#facultadesListContainer .form-check-input {
  border-color: #adb5bd;
  cursor: pointer;
}

#facultadesListContainer .form-check-input:checked {
  background-color: var(--pagalo-primary);
  border-color: var(--pagalo-primary);
}

#facultadesListContainer .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(113, 22, 16, 0.15);
}

#facultadesListContainer .form-check-label {
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--pagalo-text);
  display: block;
  width: 100%;
}

/* Buscador dentro de facultades */
#facultadSearch {
  font-size: 0.82rem;
}

#facultadSearch:focus {
  border-color: var(--pagalo-primary);
  box-shadow: 0 0 0 0.15rem rgba(113, 22, 16, 0.1);
}

/* ============================================
   ALERT SUPERADMIN
   ============================================ */
#superadminAlert {
  border-left: 4px solid #ffc107;
  background-color: #fffbeb;
  border-radius: var(--pagalo-radius);
  animation: fadeInAlert 0.3s ease;
}

@keyframes fadeInAlert {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SWITCH ACTIVO / INACTIVO
   ============================================ */
.form-check-input[role="switch"] {
  width: 2.5em;
  height: 1.25em;
  cursor: pointer;
}

.form-check-input[role="switch"]:checked {
  background-color: var(--pagalo-success);
  border-color: var(--pagalo-success);
}

.form-check-input[role="switch"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.2);
}

/* ============================================
   PASSWORD TOGGLE
   ============================================ */
#userPassword + .btn {
  border-color: var(--pagalo-border);
  color: var(--pagalo-text-muted);
}

#userPassword + .btn:hover {
  color: var(--pagalo-primary);
  background-color: var(--pagalo-primary-bg);
}

#userPassword:focus {
  border-color: var(--pagalo-primary);
  box-shadow: 0 0 0 0.2rem rgba(113, 22, 16, 0.15);
}

/* ============================================
   RESET PASSWORD MODAL
   ============================================ */
#tempPasswordDisplay {
  color: var(--pagalo-primary);
  user-select: all;
}

#btnCopyPassword {
  transition: all var(--pagalo-transition);
}

#btnCopyPassword:hover {
  color: var(--pagalo-primary);
  border-color: var(--pagalo-primary);
}

/* ============================================
   LOADING & EMPTY STATE
   ============================================ */
#loadingIndicator .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 0.2em;
}

#emptyState i {
  color: #d0d0d0 !important;
}

/* ============================================
   ALERTAS CUSTOM (Toast)
   ============================================ */
.custom-alert {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1060;
  min-width: 320px;
  max-width: 420px;
  animation: slideInRight 0.35s ease;
  box-shadow: var(--pagalo-shadow-lg);
  border-radius: var(--pagalo-radius);
  border: none;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   TOOLTIP
   ============================================ */
[data-bs-toggle="tooltip"] {
  cursor: pointer;
}

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

/* Tablet */
@media (max-width: 991.98px) {
  .container-fluid.px-4.py-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #usersTable thead th {
    font-size: 0.68rem;
    padding: 0.6rem 0.5rem;
  }

  #usersTable tbody td {
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
  }

  .user-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.65rem;
  }

  .btn-action {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }
}

/* Movil */
@media (max-width: 767.98px) {
  .container-fluid.px-4.py-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 1rem !important;
  }

  /* Stats cards en grid 2x2 */
  .row.g-3.mb-4 .col-6.col-md {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .card-body.d-flex.align-items-center.gap-3.py-3 {
    padding: 0.65rem !important;
    gap: 0.5rem !important;
  }

  .card-body h5.fw-bold {
    font-size: 1.1rem;
  }

  /* Tabla scrollable horizontalmente */
  .table-responsive {
    font-size: 0.78rem;
    -webkit-overflow-scrolling: touch;
  }

  /* Ocultar columnas menos importantes en movil */
  #usersTable th:nth-child(2),
  #usersTable td:nth-child(2) {
    display: none;
  }

  #usersTable th:nth-child(5),
  #usersTable td:nth-child(5) {
    display: none;
  }

  /* Botones de accion mas compactos */
  .d-flex.gap-2 {
    flex-wrap: wrap;
  }

  /* Modal full-width en movil */
  .modal-dialog.modal-lg {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-body {
    padding: 1rem;
  }

  .modal-body .row.g-3 .col-md-4,
  .modal-body .row.g-3 .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Movil pequeno */
@media (max-width: 575.98px) {
  .container-fluid.px-4.py-4 h4 {
    font-size: 1.1rem;
  }

  /* Filtros en stack vertical */
  .row.g-3.align-items-end .col-6.col-md-auto {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Botones header en stack */
  .d-flex.flex-column.flex-md-row {
    gap: 0.75rem;
  }

  .d-flex.gap-2 .btn-sm {
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .btn,
  .modal,
  .d-flex.gap-2,
  .input-group,
  .form-select,
  #loadingIndicator,
  #emptyState {
    display: none !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  #usersTable {
    font-size: 0.75rem;
  }

  #usersTable th,
  #usersTable td {
    display: table-cell !important;
  }

  .badge-activo::before,
  .badge-inactivo::before {
    display: none;
  }
}

/* ============================================
   SCROLLBAR CUSTOM (Lista facultades)
   ============================================ */
#facultadesListContainer::-webkit-scrollbar {
  width: 5px;
}

#facultadesListContainer::-webkit-scrollbar-track {
  background: transparent;
}

#facultadesListContainer::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 10px;
}

#facultadesListContainer::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

/* Firefox */
#facultadesListContainer {
  scrollbar-width: thin;
  scrollbar-color: #c0c0c0 transparent;
}

/* Tabla scrollbar */
.table-responsive::-webkit-scrollbar {
  height: 5px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 10px;
}

/* ============================================
   UTILIDADES
   ============================================ */
.cursor-pointer {
  cursor: pointer;
}

.text-pagalo {
  color: var(--pagalo-primary) !important;
}

.bg-pagalo {
  background-color: var(--pagalo-primary) !important;
}

.bg-pagalo-light {
  background-color: var(--pagalo-primary-bg) !important;
}

.border-pagalo {
  border-color: var(--pagalo-primary) !important;
}


/* ===== Search Results - Card Style ===== */
#resultsListModal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.service-group {
    margin-bottom: 8px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8eaf0;
}

.service-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-bottom: 1px solid #e8eaf0;
    font-size: 12px;
    color: #444;
}

.group-icon {
    color: #c0392b;
    font-size: 16px;
}

.group-title {
    font-weight: 600;
    flex: 1;
}

.group-badge {
    background: #fde8e8;
    color: #c0392b;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
}

.service-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 32px;
    cursor: pointer;
    border-bottom: 1px solid #f0f1f5;
    transition: background 0.15s ease;
}

.service-card:last-child {
    border-bottom: none;
}

.service-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f0f1f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #888;
    flex-shrink: 0;
}

/* First card gets accent icon */
.service-card:first-of-type .service-card-icon {
    background: #c0392b;
    color: #fff;
}

.service-card-body {
    flex: 1;
    min-width: 0;
}

.service-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.service-card-code {
    font-size: 12px;
    font-weight: 500;
    color: #888;
    background: #f0f1f5;
    padding: 1px 8px;
    border-radius: 6px;
}

.service-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.svc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1.5px solid transparent;
}

.tag-manana  { background: #fff9e6; color: #b8860b; border-color: #f5d76e; }
.tag-noche   { background: #eef0ff; color: #4a4adb; border-color: #b0b3f0; }
.tag-tarde   { background: #fef0e6; color: #c96a00; border-color: #f5c087; }
.tag-presencial {background: #f3e8ff; color: #7b2fa8; border-color: #c497e8; }
.tag-virtual { background: #e8f0fe; color: #2a5abf; border-color: #90aae8; }
.tag-nivel   { background: #e8f8f0; color: #1a8a4a; border-color: #7dcaa0;  }

.service-card-meta {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.service-card-price {
    font-size: 14px;
    font-weight: 700;
    color: #99020b;
    white-space: nowrap;
    flex-shrink: 0;
}

.service-card-arrow {
    color: #99020b;
    font-size: 14px;
    flex-shrink: 0;
}

/* Hover en la card completa */
.service-card:hover {
    background: #fbf5f5;
}

/* Hover en el ícono */
.service-card:hover .service-card-icon {
    background: #99020b !important;
    color: #fff !important;
}

/* ===== MODAL GENERAL ===== */
#nuevoServicioModal .modal-content {
  border-radius: 0.75rem;
  border: 1px solid #e5e0d8;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* ===== HEADER ===== */
#nuevoServicioModal .modal-header {
  border-bottom: 2.5px solid #6b1a1a;
  padding: 1rem 1.5rem;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#nuevoServicioModal .modal-header-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgba(107, 26, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#nuevoServicioModal .modal-header-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: #6b1a1a;
}

#nuevoServicioModal .modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

#nuevoServicioModal .modal-subtitle {
  font-size: 0.72rem;
  color: #888;
  margin: 0;
}

/* ===== BODY ===== */
#nuevoServicioModal .modal-body {
  padding: 1.25rem 1.5rem;
  background: #ffffff;
}

/* ===== SECCIÓN TÍTULO CON PUNTO ===== */
#nuevoServicioModal .section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#nuevoServicioModal .section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b1a1a;
  flex-shrink: 0;
}

#nuevoServicioModal .section-header h6 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1a1a1a;
}

/* ===== LABELS ===== */
#nuevoServicioModal .form-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

#nuevoServicioModal .form-label svg {
  width: 0.75rem;
  height: 0.75rem;
  stroke: #888;
  flex-shrink: 0;
}

/* ===== INPUTS Y SELECTS ===== */
#nuevoServicioModal .form-control,
#nuevoServicioModal .form-select {
  border-radius: 0.5rem;
  border: 1px solid #ddd;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: none;
}

#nuevoServicioModal .form-control::placeholder {
  color: #bbb;
}

#nuevoServicioModal .form-control:focus,
#nuevoServicioModal .form-select:focus {
  border-color: #6b1a1a;
  box-shadow: 0 0 0 3px rgba(107, 26, 26, 0.12);
  outline: none;
}

/* ===== DIVIDER + TOGGLE HORARIO ===== */
#nuevoServicioModal .horario-divider {
  position: relative;
  margin: 1.75rem 0 1.25rem;
}

#nuevoServicioModal .horario-divider hr {
  border: none;
  border-top: 1px solid #e5e0d8;
  margin: 0;
}

#nuevoServicioModal .horario-divider-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#nuevoServicioModal #toggleHorarioBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #ffffff;
  color: #555;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 1.1rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}

#nuevoServicioModal #toggleHorarioBtn:hover {
  border-color: #6b1a1a!important;
  color: #fff !important;
  background: #6b1a1a !important;
}

#nuevoServicioModal #toggleHorarioBtn.active {
  border-color: #6b1a1a !important;
  background: #6b1a1a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(107, 26, 26, 0.25);
}

#nuevoServicioModal #toggleHorarioBtn svg {
  width: 0.85rem;
  height: 0.85rem;
}

#nuevoServicioModal #toggleChevron {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform 0.2s;
}

#nuevoServicioModal #toggleChevron.rotated {
  transform: rotate(180deg);
}

/* ===== SECCIÓN HORARIOS ===== */
#nuevoServicioModal #horarioSection .horario-box {
  border-radius: 0.75rem;
  border: 1px solid #e5e0d8;
  background: #f5f2ee;
  padding: 1.25rem;
  margin-top: 10px;
}

/* ===== BOTÓN AGREGAR HORARIO ===== */
#nuevoServicioModal #agregarHorarioBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 0.5rem;
  border: none;
  background: rgba(107, 26, 26, 0.1);
  color: #6b1a1a;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: background 0.15s;
}

#nuevoServicioModal #agregarHorarioBtn:hover {
  background: rgba(107, 26, 26, 0.18);
}

/* ===== TABLA DE HORARIOS ===== */
#nuevoServicioModal #tablaHorarios {
  font-size: 0.8rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e5e0d8;
}

#nuevoServicioModal #tablaHorarios thead tr {
  background: #f5f2ee;
}

#nuevoServicioModal #tablaHorarios thead th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  border-color: #e5e0d8;
  padding: 0.6rem 0.75rem;
}

#nuevoServicioModal #tablaHorarios tbody td {
  border-color: #e5e0d8;
  padding: 0.5rem 0.75rem;
  color: #333;
  vertical-align: middle;
}

/* Empty state tabla */
#nuevoServicioModal .tabla-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #aaa;
}

#nuevoServicioModal .tabla-empty svg {
  width: 2rem;
  height: 2rem;
  stroke: #ccc;
  margin-bottom: 0.5rem;
}

#nuevoServicioModal .tabla-empty p {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #888;
}

#nuevoServicioModal .tabla-empty span {
  font-size: 0.75rem;
  color: #bbb;
}

/* ===== FOOTER ===== */
#nuevoServicioModal .modal-footer {
  background: #faf8f5;
  border-top: 1px solid #e5e0d8;
  padding: 0.875rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

#nuevoServicioModal .modal-footer .btn-cancelar {
  border-radius: 0.5rem;
  border: 1px solid #ddd;
  background: #ffffff;
  color: #555;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  transition: background 0.15s, color 0.15s;
}

#nuevoServicioModal .modal-footer .btn-cancelar:hover {
  background: #f5f2ee;
  color: #333;
}

#nuevoServicioModal .modal-footer .btn-registrar {
  border-radius: 0.5rem;
  background: #6b1a1a;
  color: #ffffff;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  box-shadow: 0 2px 6px rgba(107, 26, 26, 0.3);
  transition: opacity 0.15s, transform 0.1s;
}

#nuevoServicioModal .modal-footer .btn-registrar:hover {
  opacity: 0.9;
}

#nuevoServicioModal .modal-footer .btn-registrar:active {
  transform: scale(0.98);
}

#nuevoServicioModal .horario-divider {
  position: relative;
  margin: 1.75rem 0 1.25rem;
  margin-bottom: 27px;
}

#nuevoServicioModal .horario-divider hr {
  border: none;
  border-top: 1px solid #979696;
  margin: 0;
}

#nuevoServicioModal .horario-divider-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#searchModal .modal-content {
  border-radius: 0.75rem;
  border: 1px solid #e5e0d8;
  overflow: hidden;
}

#searchModal .modal-header {
  border-bottom: 2.5px solid #6b1a1a;
  padding: 1rem 1.5rem;
  background: #ffffff;
}

#searchModal .modal-header-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgba(107, 26, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#searchModal .modal-header-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: #6b1a1a;
}

#searchModal .modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

#searchModal .modal-subtitle {
  font-size: 0.72rem;
  color: #888;
  margin: 0;
}

.btn-danger{
  background: #6b1a1a !important;
}

.btn-warning{
  background: rgba(107, 26, 26, 0.1) !important;
  color: #6b1a1a;
  border-color: rgba(107, 26, 26, 0.1)  !important;
}

.active>.page-link, .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: #6b1a1a !important;
    border-color: #6b1a1a !important;
}

.page-link {
    color: #6b1a1a;
}


/* ========================================
   REPORTES - CSS
   Pagalo UNI
   Complemento a Bootstrap 5.3+
   ======================================== */

/* ---- KPI Cards ---- */
.kpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 10px !important;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ---- Tabla ---- */
#tablaReporte thead th {
    border-bottom-width: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 10px 14px;
}
#tablaReporte tbody td {
    vertical-align: middle;
    padding: 12px 14px;
    font-size: 0.875rem;
    color: #334155;
}
#tablaReporte tbody tr:hover {
    background: #f8fafc;
}
#tablaReporte tfoot td {
    font-weight: 800;
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
    padding: 12px 14px;
    font-size: 0.875rem;
    color: #0f172a;
}

/* ---- Celdas especiales ---- */
.td-codigo {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8rem !important;
    color: #64748b !important;
    font-weight: 600;
}
.td-servicio-nombre {
    font-weight: 700;
    color: #0f172a !important;
    max-width: 280px;
}
.td-servicio-nombre .servicio-sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-importe {
    font-weight: 700;
    color: #711610 !important;
    white-space: nowrap;
}
.td-total-ingresos {
    font-weight: 800;
    color: #711610 !important;
    white-space: nowrap;
    font-size: 0.9rem !important;
}

/* ---- Badge de tipo ---- */
.badge-tipo {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.badge-tipo-curso      { background: #dbeafe; color: #1e40af; }
.badge-tipo-diploma    { background: #fce7f3; color: #9d174d; }
.badge-tipo-maestria   { background: #ede9fe; color: #5b21b6; }
.badge-tipo-doctorado  { background: #fef3c7; color: #92400e; }
.badge-tipo-taller     { background: #d1fae5; color: #065f46; }
.badge-tipo-seminario  { background: #e0f2fe; color: #075985; }
.badge-tipo-certificacion { background: #fef9c3; color: #854d0e; }
.badge-tipo-default    { background: #f1f5f9; color: #475569; }

/* ---- Barra de capacidad ---- */
.capacity-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.capacity-bar-track {
    flex: 1;
    height: 8px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
    min-width: 60px;
}
.capacity-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
}
.capacity-bar-fill.low  { background: #198754; }
.capacity-bar-fill.mid  { background: #fd7e14; }
.capacity-bar-fill.high { background: #dc3545; }
.capacity-bar-fill.full { background: #711610; }

.capacity-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    min-width: 38px;
    text-align: right;
}

/* ---- Badge de vacantes ---- */
.vacantes-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.vacantes-disponible { background: #dcfce7; color: #166534; }
.vacantes-poca       { background: #fef3c7; color: #92400e; }
.vacantes-agotada    { background: #fef2f2; color: #dc2626; }

/* ---- Paginacion ---- */
.pag-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}
.pag-btn:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.pag-btn.active {
    background: #711610;
    color: white;
    border-color: #711610;
}
.pag-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Print ---- */
@media print {
    .btn, .card-body > .row, #paginacionBar { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
    #tablaReporte tbody td, #tablaReporte thead th, #tablaReporte tfoot td {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
    }
    .d-none.d-lg-table-cell, .d-none.d-md-table-cell { display: table-cell !important; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .kpi-card .card-body h3 { font-size: 1.4rem; }
    #tablaReporte thead th, #tablaReporte tbody td { padding: 8px 10px; font-size: 0.8rem; }
    .capacity-bar-track { min-width: 40px; }
    .td-servicio-nombre { max-width: 180px; }
}
@media (max-width: 576px) {
    .kpi-card .card-body h3 { font-size: 1.2rem; }
    .badge-tipo { font-size: 0.65rem; padding: 2px 8px; }
}

.form-control-sm,
.form-select-sm{
    height: 31px;
}


/*
 * Pagalo UNI - Gestion de Servicios (Mejorado)
 * Complemento a Bootstrap 5.3 - Mismo estilo que Reportes
 */

/* ============================================
   VARIABLES DEL TEMA
   ============================================ */
:root {
    --pagalo-primary: #711610;
    --pagalo-primary-dark: #5a120d;
    --pagalo-primary-light: #8b1d15;
    --pagalo-primary-bg: rgba(113, 22, 16, 0.06);
    --pagalo-primary-bg-hover: rgba(113, 22, 16, 0.1);
    --pagalo-success: #198754;
    --pagalo-danger: #dc3545;
    --pagalo-warning: #856404;
    --pagalo-info: #084298;
    --pagalo-text: #1a1d20;
    --pagalo-text-muted: #6c757d;
    --pagalo-border: #dee2e6;
    --pagalo-bg-light: #f8f9fa;
    --pagalo-radius: 0.5rem;
    --pagalo-radius-lg: 0.75rem;
    --pagalo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --pagalo-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --pagalo-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --pagalo-transition: 0.2s ease;
}

/* ============================================
   KPI CARDS
   ============================================ */
.kpi-card {
    border-radius: var(--pagalo-radius-lg) !important;
    transition: transform var(--pagalo-transition), box-shadow var(--pagalo-transition);
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pagalo-shadow) !important;
}

.kpi-card .card-body h3 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

/* ============================================
   FILTROS
   ============================================ */
#inputBuscar {
    font-size: 0.85rem;
}

#inputBuscar:focus {
    box-shadow: none;
    border-color: var(--pagalo-primary);
}

.input-group:focus-within .input-group-text {
    border-color: var(--pagalo-primary);
}

.form-select:focus {
    border-color: var(--pagalo-primary);
    box-shadow: 0 0 0 0.15rem rgba(113, 22, 16, 0.15);
}

/* ============================================
   TABLA DE SERVICIOS
   ============================================ */
#serviciosTable {
    font-size: 0.85rem;
}

#serviciosTable thead th {
    background-color: #f8fafc !important;
    color: var(--pagalo-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--pagalo-border);
    white-space: nowrap;
}

#serviciosTable tbody td {
    vertical-align: middle;
    border-color: #f5f5f5;
}

#serviciosTable tbody tr {
    transition: background-color var(--pagalo-transition);
}

#serviciosTable tbody tr:hover {
    background-color: var(--pagalo-primary-bg) !important;
}

/* ============================================
   BADGES DE TIPO
   ============================================ */
.badge.bg-primary.bg-opacity-10 {
    background-color: rgba(13, 110, 253, 0.1) !important;
    color: #0d6efd !important;
    font-weight: 600;
}

.badge.bg-success.bg-opacity-10 {
    background-color: rgba(25, 135, 84, 0.1) !important;
    color: #198754 !important;
    font-weight: 600;
}

.badge.bg-secondary.bg-opacity-10 {
    background-color: rgba(108, 117, 125, 0.1) !important;
    color: #6c757d !important;
    font-weight: 600;
}

/* ============================================
   BOTONES DE ACCION
   ============================================ */
.btn-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pagalo-radius);
    border: 1px solid transparent;
    background: transparent;
    transition: all var(--pagalo-transition);
    font-size: 0.85rem;
    color: var(--pagalo-text-muted);
}

.btn-action:hover {
    transform: scale(1.08);
}

.btn-action.view-horarios-btn {
    color: var(--pagalo-info);
}
.btn-action.view-horarios-btn:hover {
    background-color: #cfe2ff;
    border-color: #b6d4fe;
    color: #084298;
}

.btn-action.edit {
    color: #fd7e14;
}
.btn-action.edit:hover {
    background-color: #fff3cd;
    border-color: #ffecb5;
    color: #d97706;
}

.btn-action.delete {
    color: var(--pagalo-danger);
}
.btn-action.delete:hover {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

/* ============================================
   PAGINACION
   ============================================ */
.pagination .page-link {
    color: var(--pagalo-text-muted);
    border-color: var(--pagalo-border);
    font-size: 0.8rem;
    padding: 0.4rem 0.7rem;
}

.pagination .page-item.active .page-link {
    background-color: var(--pagalo-primary);
    border-color: var(--pagalo-primary);
    color: #fff;
}

.pagination .page-link:hover {
    background-color: var(--pagalo-primary-bg);
    border-color: var(--pagalo-primary);
    color: var(--pagalo-primary);
}

.pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #f8f9fa;
}

/* ============================================
   MODAL MEJORADO
   ============================================ */
.modal-content {
    border: none !important;
    border-radius: var(--pagalo-radius-lg) !important;
    box-shadow: var(--pagalo-shadow-lg);
}

.modal-header {
    padding: 1rem 1.25rem;
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    padding: 0.75rem 1.25rem;
}

/* Form controls en modal */
.modal .form-control,
.modal .form-select {
    border: 1px solid var(--pagalo-border);
    border-radius: var(--pagalo-radius);
    font-size: 0.85rem;
    transition: border-color var(--pagalo-transition), box-shadow var(--pagalo-transition);
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--pagalo-primary);
    box-shadow: 0 0 0 0.15rem rgba(113, 22, 16, 0.15);
}

.modal .form-label {
    color: #495057;
    margin-bottom: 0.3rem;
}

/* Seccion horarios colapsable */
#horarioSection {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tabla de horarios dentro del modal */
#tablaHorarios {
    font-size: 0.75rem;
}

#tablaHorarios thead th {
    background-color: #f1f5f9 !important;
    color: var(--pagalo-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem;
}

#tablaHorarios tbody td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
}

#tablaHorarios .editarHorarioBtn,
#tablaHorarios .eliminarHorarioBtn {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
}

/* ============================================
   BOTON PRINCIPAL
   ============================================ */
.btn[style*="background-color:#711610"],
.btn[style*="background-color: #711610"] {
    transition: all var(--pagalo-transition);
}

.btn[style*="background-color:#711610"]:hover,
.btn[style*="background-color: #711610"]:hover {
    background-color: var(--pagalo-primary-dark) !important;
    box-shadow: 0 2px 6px rgba(113, 22, 16, 0.3);
    transform: translateY(-1px);
}

.btn[style*="background-color:#711610"]:active,
.btn[style*="background-color: #711610"]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ============================================
   ALERTAS CUSTOM
   ============================================ */
.custom-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1060;
    max-width: 400px;
}

.custom-alert .alert {
    box-shadow: var(--pagalo-shadow);
    border-radius: var(--pagalo-radius);
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ============================================
   EMPTY STATE
   ============================================ */
#emptyState {
    animation: fadeIn 0.4s ease;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .kpi-card .card-body h3 {
        font-size: 1.25rem;
    }
    
    .kpi-card .card-body small {
        font-size: 0.65rem !important;
    }
    
    #serviciosTable {
        font-size: 0.8rem;
    }
    
    .btn-action {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .container-fluid.px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .kpi-card .card-body {
        padding: 0.75rem !important;
    }
    
    .kpi-card .card-body h3 {
        font-size: 1.1rem;
    }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    .btn, .modal, .pagination, .custom-alert, 
    #toggleHorarioBtn, .btn-action {
        display: none !important;
    }
    
    .kpi-card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
    
    #serviciosTable {
        font-size: 0.7rem;
    }
}

/* ========================================
   REPORTE DE ORDENES DE PAGO - CSS
   Pagalo UNI
   Complemento a Bootstrap 5.3+
   ======================================== */

/* ---- KPI Cards ---- */
.kpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 10px !important;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ---- Radio buttons custom ---- */
.form-check-input:checked {
    background-color: #711610;
    border-color: #711610;
}
.form-check-input:focus {
    border-color: #711610;
    box-shadow: 0 0 0 0.2rem rgba(113, 22, 16, 0.25);
}

/* ---- Tabla ---- */
#tablaOrdenes thead th {
    border-bottom-width: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 10px 12px;
}
#tablaOrdenes tbody td {
    vertical-align: middle;
    padding: 12px;
    font-size: 0.875rem;
    color: #334155;
}
#tablaOrdenes tbody tr:hover {
    background: #fdf8f7;
}
#tablaOrdenes tfoot td {
    font-weight: 800;
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
    padding: 12px;
    font-size: 0.875rem;
    color: #0f172a;
}

/* ---- Celdas especiales ---- */
.td-id-orden {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8rem !important;
    color: #711610 !important;
    font-weight: 700;
}
.td-servicio {
    font-weight: 600;
    color: #0f172a !important;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-importe {
    font-weight: 700;
    color: #711610 !important;
    white-space: nowrap;
    font-size: 0.9rem !important;
}
.td-fecha {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
}
.td-nro-operacion {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.75rem !important;
    color: #475569;
}
.td-subdep {
    font-size: 0.8rem;
    color: #475569;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Badge de estado ---- */
.badge-estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.badge-pendiente {
    background: #fef3c7;
    color: #92400e;
}
.badge-pagado {
    background: #dcfce7;
    color: #166534;
}
.badge-anulado {
    background: #fef2f2;
    color: #dc2626;
}
.badge-vencido {
    background: #fee2e2;
    color: #b91c1c;
}

/* ---- Badge de tipo documento ---- */
.badge-tipo-doc {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.badge-boleta {
    background: #e0f2fe;
    color: #075985;
}
.badge-factura {
    background: #ede9fe;
    color: #5b21b6;
}

/* ---- Botones de accion ---- */
.btn-accion {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.btn-accion:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-ver {
    background: #0ea5e9;
    color: white;
    border: none;
}
.btn-ver:hover {
    background: #0284c7;
    color: white;
}

.btn-pagar {
    background: #16a34a;
    color: white;
    border: none;
}
.btn-pagar:hover {
    background: #15803d;
    color: white;
}

.btn-anular {
    background: #dc2626;
    color: white;
    border: none;
}
.btn-anular:hover {
    background: #b91c1c;
    color: white;
}

.btn-descargar {
    background: #06b6d4;
    color: white;
    border: none;
}
.btn-descargar:hover {
    background: #0891b2;
    color: white;
}

/* ---- Paginacion ---- */
.pag-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}
.pag-btn:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.pag-btn.active {
    background: #711610;
    color: white;
    border-color: #711610;
}
.pag-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Modal ---- */
.detalle-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.detalle-row:last-child {
    border-bottom: none;
}
.detalle-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}
.detalle-value {
    font-size: 0.85rem;
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}
.detalle-value.importe {
    color: #711610;
    font-size: 1rem;
}
.detalle-section {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.detalle-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #711610;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* ---- Print ---- */
@media print {
    .btn, .card-body > .row:first-child, #paginacionBar, .modal { display: none !important; }
    .card { border: none !important; box-shadow: none !important; }
    #tablaOrdenes tbody td, #tablaOrdenes thead th, #tablaOrdenes tfoot td {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
    }
    .d-none.d-lg-table-cell, .d-none.d-md-table-cell { display: table-cell !important; }
    .badge-estado { padding: 2px 6px; font-size: 0.65rem; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .kpi-card .card-body h3 { font-size: 1.4rem; }
    #tablaOrdenes thead th, #tablaOrdenes tbody td { padding: 8px; font-size: 0.8rem; }
    .btn-accion { padding: 4px 8px; font-size: 0.7rem; }
    .td-servicio { max-width: 140px; }
}
@media (max-width: 576px) {
    .kpi-card .card-body h3 { font-size: 1.2rem; }
    .badge-estado { font-size: 0.65rem; padding: 3px 8px; }
    .form-check-label { font-size: 0.8rem; }
}


@media (min-width: 768px) {
    .col-md-3 {
        flex: 0 0 auto;
        width: 14.2% !important;
    }
}

@media (min-width: 768px) {
    .col-mmdd-4 {
        flex: 0 0 auto;
        width: 21% !important;
    }
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33% !important;
    }
}

@media (min-width: 768px) {
    .col-m-1 {
        flex: 0 0 auto;
        width: 4% !important;
    }
}

@media (min-width: 768px) {
    .col-d-1 {
        flex: 0 0 auto;
        width: 23% !important;
    }
}

@media (min-width: 768px) {
    .col-dd-1 {
        flex: 0 0 auto;
        width: 22.5% !important;
    }
}

.gap-int{
      gap: 5rem !important;
}

@media (min-width: 768px) {
    .col-dm-1 {
        flex: 0 0 auto;
        width: 26% !important;
    }
}

.mr-2{
      margin-right: 10px !important;
}

/* ============ LOADER ============ */
.loader-overlay {
    position: fixed;
    top: 15%;
    left: 0;
    width: 100%;
    height: 90%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.loader-overlay.hidden {
    display: none;
}

.loader-container {
    text-align: center;
}

.loader-container .spinner-border {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 0.35rem;
    color: #6b1a1a !important;
}

.loader-text {
    color: #6b1a1a !important;
    font-weight: 500;
    font-size: 1.1rem;
    margin-top: 1rem;
}

.btn-ce{
      color: white;
    background: #6b1a1a;
    border: #6b1a1a;
}

.btn-ce:hover{
    background: #ffe9d8;
    border: #ffe9d8;
}

.btn-infos{
    background: #ffe9d8;
    border: #ffe9d8;
}