#fotoprev {
		display: block;
		max-width: 100%;
		max-height: 250px;
		object-fit: cover;
		border: 1px solid #ccc;
		border-radius: 8px;
		margin: 0 auto;
	}

	.table-hover tbody tr:hover {
		background-color: #f1f1f1;
		cursor: pointer;
	}

	.btn-seleccionar {
		padding: 4px 10px;
		font-size: 0.875rem;
	}

	#resultadoBusqueda {
		border: 1px solid #ddd;
		border-radius: 6px;
		padding: 10px;
		background-color: #fff;
	}

	#tablaAcompanantes tr {
		height: 20px !important;
	}

	#tablaEstancias tr {
		height: 20px !important;
	}

	.input-wrapper {
		display: flex;
		gap: 0.5rem;
		align-items: flex-start;
	}

	.form-label-group {
		display: flex;
		width: 100%;
		gap: 0.5rem;
		margin-bottom: 0.25rem;
	}

	.form-label-group label {
		flex: 1;
		text-align: left;
	}

	.form-control {
		height: 40px;
	}

	.btn-round {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		min-height: 40px !important;
		border-radius: 50% !important;
		padding: 0 !important;
		text-align: center !important;
		line-height: 40px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.btn-round i {
		font-size: 20px !important;
		margin: 0 !important;
	}

	#txtfolio {
		max-width: 100px;
	}

	.form-row {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}

	.form-group {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
	}

	.cuerpo-modal {
		height: 400px;
		overflow-y: auto;
	}

	#tablaModal tbody tr {
		cursor: pointer;
		transition: all 0.2s ease-in-out;
	}

	#tablaModalEstancia tbody tr {
		cursor: pointer;
		transition: all 0.2s ease-in-out;
	}

	#tablaModalEstancia tbody tr:hover {
		background-color: #f8f9fa;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
		transform: scale(1.01);
		z-index: 1;
		position: relative;
	}

	#tablaModal tbody tr:hover {
		background-color: #f8f9fa;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
		transform: scale(1.01);
		z-index: 1;
		position: relative;
	}

	#tablaPersonas,
	#tablaPersonas th,
	#tablaPersonas tbody,
	#tablaPersonas td {
		border: none !important;
	}

	#tablaAcompanantes,
	#tablaAcompanantes th,
	#tablaAcompanantes tbody,
	#tablaAcompanantes td {
		border: none !important;
	}

	#tablaEstancias,
	#tablaEstancias th,
	#tablaEstancias tbody,
	#tablaEstancias td {
		border: none !important;
	}

	#tblReporteEstancias {
		overflow-x: auto;
	}

	#tblReporteEstancias td,
	#tblReporteEstancias th {
		word-wrap: break-word;
		max-width: 300px;
		white-space: inherit;
	}

	#tblIncidencias-wrapper {
		overflow-x: auto;
	}

	#tblPersonas-wrapper {
		overflow-x: auto;
	}

	#tblEstancias-wrapper {
		overflow-x: auto;
	}

	#tblIncidencias th,
	#tblIncidencias td {
		word-wrap: break-word;
		max-width: 300px;
		white-space: inherit;
	}

	#tblPersonas td,
	#tblPersonas th {
		word-wrap: break-word;
		max-width: 300px;
		white-space: inherit;
	}

	#tblEstancias td,
	#tblEstancias th {
		word-wrap: break-word;
		max-width: 300px;
		white-space: inherit;
	}

	#tblPersonas.dataTable tbody td.dt-control::before {
		display: none !important;
	}

	#tblIncidencias.dataTable tbody td.dt-control::before {
		display: none !important;
	}

	#loader-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: white;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-family: sans-serif;
	}

	#loader {
		border: 8px solid #f3f3f3;
		border-top: 8px solid #3498db;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		animation: spin 1s linear infinite;
		margin-bottom: 15px;
	}

	#loader-text {
		font-size: 16px;
		color: #333;
	}

	.textobglogin {
		background-image: url("../img/iconousesion.png");
		background-repeat: no-repeat;
		background-position: 98% 50%;
	}

	.textobglogin:focus {
		background-image: url("../img/iconousesion.png");
		background-repeat: no-repeat;
		background-position: 98% 50%;
	}

	.textobgpassword {
		background-image: url("../img/iconopsesiong.png");
		background-repeat: no-repeat;
		background-position: 98% 50%;
	}

	.textobgpassword:focus {
		background-image: url("../img/iconopsesion.png");
		background-repeat: no-repeat;
		background-position: 98% 50%;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.w-5 {
		flex: 0 0 5%;
	}

	.w-10 {
		flex: 0 0 10%;
	}

	.w-12 {
		flex: 0 0 12%;
	}

	.w-14 {
		flex: 0 0 14%;
	}

	.w-15 {
		flex: 0 0 15%;
	}

	.w-20 {
		flex: 0 0 20%;
	}

	.w-22 {
		flex: 0 0 22%;
	}

	.w-23 {
		flex: 0 0 23%;
	}

	.w-25 {
		flex: 0 0 25%;
	}

	.w-28 {
		flex: 0 0 28%;
	}

	.w-30 {
		flex: 0 0 30%;
	}

	.w-35 {
		flex: 0 0 35%;
	}

	.w-40 {
		flex: 0 0 40%;
	}

	.w-42 {
		flex: 0 0 42%;
	}

	.w-45 {
		flex: 0 0 45%;
	}

	.w-50 {
		flex: 0 0 50%;
	}

	.w-55 {
		flex: 0 0 55%;
	}

	.w-60 {
		flex: 0 0 60%;
	}

	.w-70 {
		flex: 0 0 70%;
	}

	.w-80 {
		flex: 0 0 80%;
	}

	.w-80 {
		flex: 0 0 90%;
	}

	.w-100 {
		flex: 0 0 100%;
	}

	.fila-advertencia {
		background-color: #dc3545;
		color: white !important;
	}

	#TablaData {
		margin-top: 20px;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		background-color: transparent;
	}

	#TablaData .table {
		background-color: #ffffff;
		border: 1px solid #ddd;
		border-radius: 6px;
		overflow: hidden;
	}

	#TablaData .table th {
		background-color: #f0f0f0;
		color: #333;
		font-weight: 400;
		text-align: center;
		padding: 13px 10px !important;
		font-size: 14px;
		border-bottom: 2px solid #ccc;
	}

	#TablaData .table td {
		color: #ffffff;
		padding: 8px 12px;
		font-size: 12px;
		border-top: 1px solid #eee;
	}

	#TablaData .row {
		margin-bottom: 20px;
	}

	#TablaData .col-md-3 {
		padding: 10px;
	}

	.password-wrapper {
		position: relative;
	}

	.toggle-button {
		display: inline-flex;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: unset;
		right: 25px;
		cursor: pointer;
	}

	.eye-icon {
		width: 20px;
		height: 20px;
	}

	.puntaje-texto {
		display: inline-flex;
		align-items: center;
	}

	.puntaje-circulo {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		display: inline-block;
		margin-right: 6px;
	}

	.puntaje-verde {
		background-color: green;
	}

	.puntaje-azul {
		background-color: blue;
	}

	.puntaje-gris {
		background-color: gray;
	}

	.puntaje-naranja {
		background-color: orange;
	}

	.puntaje-rojo {
		background-color: red;
	}

	.puntaje-negro {
		background-color: black;
	}

	.camas-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 1rem;
	}

	.cama-btn {
		width: 60px;
		height: 60px;
		max-width: 100%;
		background-color: #f0f0f0;
		border: none;
		border-radius: 6px;
		text-align: center;
		line-height: 60px;
		font-weight: bold;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: background-color 0.3s;
	}

	.cama-btn.selected {
		background-color: #0017bd;
		color: #fff;
	}

	.cama-btn.selected .icono-espacio {
		background-color: #0017bd;
		color: #fff;
	}

	.cama-btn.ocupada {
		cursor: not-allowed;
		pointer-events: none;
	}

	.material-icons {
		font-size: 18px;
		vertical-align: middle;
	}

	.btn-sm {
		padding: 4px 6px;
	}

	.cama-box {
		aspect-ratio: 1 / 1;
		width: 60px;
		max-width: 100%;
		border: none;
		border-radius: 6px;
		text-align: center;
		line-height: 35px;
		font-weight: bold;
		background-color: #e0e0e0;
		position: relative;
		overflow: hidden;
	}

	.cama-box.ocupada {
		background-color: #dc3545;
		color: white;
		border-color: #b02a37;
	}

	.closecamas {
		float: right;
		font-size: 24px;
		cursor: pointer;
	}

	.recamara-box {
		margin-bottom: 25px;
	}

	.recamara-title {
		font-weight: bold;
		font-size: 1.2em;
		margin-bottom: 10px;
	}

	.camas-grid {
		display: flex;
		grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
		flex-wrap: wrap;
		gap: 10px;
	}

	.cama-box {
		text-align: center;
		padding: 10px;
		border-radius: 5px;
		border: none;
	}

	.cama-baja {
		background-color: #ffeb3b;
		color: #000;
	}

	.cama-alta {
		background-color: #4caf50;
		color: #000;
	}

	.cama-otro {
		background-color: #9e9e9e;
		color: #000;
	}

	.ocupada {
		background-color: #f44336 !important;
		color: white;
	}

	.icono-tache {
		position: absolute;
		top: 5px;
		right: 5px;
		font-size: 14px;
		color: #ffffff;
		border-radius: 50%;
		width: 16px;
		height: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
	}

	.modal-camas {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.modal-camas-content {
		background: #fff;
		padding: 20px;
		border-radius: 10px;
		width: 90%;
		max-width: 800px;
		max-height: 90vh;
		overflow-y: auto;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	}

	.icono-espacio {
		position: absolute;
		bottom: 4px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 20px;
		color: #000;
	}

	.dropdown-menu::before {
		display: none !important;
		content: none !important;
	}

	.acciones-dropdown .dropdown-menu {
		position: absolute !important;
		z-index: 9999 !important;
		left: auto !important;
		right: 0 !important;
		margin-top: 0.25rem;
		transform: none !important;
		min-width: 150px;
		box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
	}

	.btn-icon-only i.material-icons {
		font-size: 20px;
		vertical-align: middle;
	}

	.acciones-dropdown {
		display: flex;
		align-items: center !important;
		height: 100%;
	}

	.acciones-dropdown button {
		margin-top: 12px;
	}

	.fila-incidencia {
		background-color: #ffdf40 !important;
	}

	.crm-calendario-contenedor {
		min-width: 400px;
		margin-left: auto;
	}

	#crmCalendario {
		width: 100%;
		max-width: 1200px;
		height: 475px;
		aspect-ratio: 1/1;
		margin: auto;
		background-color: white;
		padding: 15px;
		border-radius: 10px;
	}

	#crmCalendario .fc-event {
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	#crmCalendario .fc-event:hover {
		background-color: #ec407a;
		border-color: #ec407a;
	}

	.crm-tarjeta {
		display: none;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.crm-tarjeta-contenido {
		background-color: #fff;
		margin: 10% auto;
		padding: 20px;
		width: 90%;
		max-width: 400px;
		border-radius: 8px;
		position: relative;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	}

	.crm-tarjeta-cerrar {
		position: absolute;
		top: 10px;
		right: 15px;
		font-size: 24px;
		cursor: pointer;
	}

	.crm-flex-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: space-between;
	}

	.crm-calendario-contenedor {
		flex: 1 1 55%;
		min-width: 450px;
	}

	.crm-tabla-contenedor {
		flex: 2 / 1 30%;
		min-width: 200px;

		overflow-y: auto;
		background: white;
		border-radius: 8px;
		padding: 10px;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	}

	#formDonante .form-check-input[type="checkbox"],
	#formSeguimiento .form-check-input[type="checkbox"] {
		appearance: none !important;
		-webkit-appearance: none !important;
		background-color: #fff !important;
		border: 1px solid #ccc !important;
		position: relative !important;
		cursor: pointer;
	}

	/* Estilo para checkbox marcado */
	#formDonante .form-check-input[type="checkbox"]:checked,
	#formSeguimiento .form-check-input[type="checkbox"]:checked {
		background-color: #2196F3 !important;
		border-color: #2196F3 !important;
	}

	/* Ícono visual dentro del checkbox (estado normal) */
	#formDonante .form-check-input[type="checkbox"]::after,
	#formSeguimiento .form-check-input[type="checkbox"]::after {
		content: "check";
		font-family: 'Material Icons Round' !important;
		font-style: normal;
		font-weight: normal;
		speak-as: none;
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 1rem;
		color: white;
		opacity: 0;
		transition: opacity 0.2s ease-in-out;
		pointer-events: none;
	}

	/* Ícono visible cuando está marcado */
	#formDonante .form-check-input[type="checkbox"]:checked::after,
	#formSeguimiento .form-check-input[type="checkbox"]:checked::after {
		opacity: 1;
	}

	.comentario-largo {
		white-space: normal !important;
		word-wrap: break-word;
		text-align: justify;
		max-width: 300px;
	}

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

	.menu-header h2 {
		font-size: 1.5rem;
		font-weight: bold;
	}

	.menu-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	.menu-button {
		padding: 1rem;
		border-radius: 12px;
		font-weight: 500;
		text-decoration: none;
		transition: transform 0.2s;
	}

	.menu-button:hover {
		transform: scale(1.05);
	}

	.pleca {
		background: #e9ecef;
		color: #004d7a;
		padding: 15px 15px;
		border-radius: 8px 8px 0 0;
		cursor: pointer;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.pleca.active {
		background: #004d7a;
		color: #fff;
	}

	.pleca:hover {
		background: #0077b6;
		color: #fff;
	}

	.contenidoPleca {
		background: #fff;
		border-radius: 0 0 8px 8px;
		padding: 0px;

	}

	/* --- APPLE STYLE TABLE --- */

	/* Fuente y limpieza general */
	/* Botón Excel estilo Apple */
	.dt-button {
		background: #0071e3 !important;
		color: white !important;
		border-radius: 8px !important;
		border: none !important;
		padding: 8px 14px !important;
		font-size: 14px !important;
		font-weight: 500 !important;
	}

	.dt-button:hover {
		background: #005bbd !important;
	}

	/* Lista izquierda estilo Apple */
	.list-group-item {
		border: none;
		padding: 0.8rem 1rem;
		font-size: 0.95rem;
		cursor: pointer;
	}

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

	#panelInfo hr {
		opacity: .15;
	}

	/* Sombra ligera al panel derecho */
	#contenedorTabla {
		background: white;
		padding: 20px;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
	}

	/* ===========================
   TABLA ESTILO APPLE
   =========================== */
	#tblProspectos {
		border-collapse: separate !important;
		border-spacing: 0;
		width: 100%;
		font-size: 12px;
		color: #1d1d1f;
		background: transparent;
		--line-color: #e5e5e7;
	}

	/* Encabezados minimalistas */
	#tblProspectos thead th {
		background: #fafafa !important;
		border: none !important;
		padding: 12px 10px;
		font-weight: 300 !important;
		color: #1d1d1f !important;
		text-align: center !important;
		box-shadow: none !important;
	}

	/* Quitar líneas verticales completamente */
	#tblProspectos thead th,
	#tblProspectos tbody td {
		border-left: none !important;
		border-right: none !important;
	}

	/* Líneas horizontales del cuerpo */
	#tblProspectos tbody td {
		border-bottom: 1px solid var(--line-color) !important;
		padding: 10px 10px;
	}

	/* ===========================
   RESET DE LINEAS ENCABEZADO (DataTables las mete a escondidas)
   =========================== */
	table.dataTable thead th,
	table.dataTable thead td {
		border-bottom: none !important;
	}

	table.dataTable.no-footer {
		border-bottom: none !important;
	}

	.dataTables_scrollHeadInner table thead th {
		border-bottom: none !important;
	}

	.dataTables_scrollHead table {
		border-bottom: none !important;
	}

	/* ===========================
   PAGINADO MINIMAL APPLE
   =========================== */
	.dataTables_wrapper .dataTables_paginate .paginate_button {
		border: none !important;
		background: transparent !important;
		padding: 6px 10px;
		margin: 0 2px;
		color: #1d1d1f !important;
		border-radius: 6px;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button.current {
		background: #e5e5e7 !important;
		box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
	}

	/* ===========================
   BUSCADOR Y SELECT MINIMAL
   =========================== */
	.dataTables_filter input,
	.dataTables_length select {
		border: 1px solid #d2d2d7 !important;
		padding: 6px 10px !important;
		border-radius: 6px !important;
		background: #fff !important;
		font-size: 14px;
	}

	/* ===========================
   ESTILOS DE FILAS (hover, actives)
   =========================== */

	/* DataTables mete colores default en odd/even → los anulamos */
	#tblProspectos tbody tr.odd,
	#tblProspectos tbody tr.even {
		background-color: transparent !important;
	}

	/* Hover suave estilo Apple */
	#tblProspectos tbody tr:hover {
		background-color: #f7f7f8 !important;
	}

	/* Fila seleccionada */
	#tblProspectos tbody tr.fila-activa {
		background-color: #f2f2f3 !important;
	}

	/* Cursor tipo mano */
	#tblProspectos tbody tr {
		cursor: pointer !important;
	}

	.resumen-kpis {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.kpi-card {
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		padding: 14px;
	}

	.kpi-title {
		font-weight: 700;
		margin-bottom: 10px;
	}

	.kpi-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.kpi-item {
		background: #f9fafb;
		border: 1px solid #eef2f7;
		border-radius: 10px;
		padding: 10px;
	}

	.kpi-label {
		font-size: 12px;
		color: #6b7280;
	}

	.kpi-value {
		font-size: 22px;
		font-weight: 800;
		line-height: 1.1;
		margin-top: 4px;
	}

	@media (max-width: 900px) {
		.resumen-kpis {
			grid-template-columns: 1fr;
		}
	}

	/* Modal XL que no se corta: header+footer fijos, body scrollea */
	#modalProspecto .modal-dialog {
		height: calc(100vh - 2rem);
		margin: 1rem auto;
	}

	#modalProspecto .modal-content {
		max-height: 100%;
		overflow: hidden;
		/* importante: evita que el footer se salga */
		display: flex;
		flex-direction: column;
	}

	#modalProspecto .modal-header,
	#modalProspecto .modal-footer {
		flex: 0 0 auto;
	}

	#modalProspecto .modal-body {
		flex: 1 1 auto;
		overflow-y: auto;
		/* aquí debe estar el scroll */
	}

	/* En pantallas chicas, que no quede pegado */
	@media (max-width: 576px) {
		#modalProspecto .modal-dialog {
			height: calc(100vh - 1rem);
			margin: .5rem auto;
		}
	}

	/* ===============================
   Igualar altura inputs y selects
   =============================== */
	#modalProspecto .form-control-sm,
	#modalProspecto .form-select-sm {
		height: 38px;
		/* puedes usar 36 o 40 si quieres */
		padding-top: .375rem;
		padding-bottom: .375rem;
		line-height: 1.2;
	}

	/* Ajuste flecha en selects */
	#modalProspecto .form-select-sm {
		padding-right: 2rem;
	}

	/* ===============================
   Padding cómodo solo al body
   =============================== */
	#modalProspecto .modal-body {
		padding: 1rem;
	}


	#tblDonaciones td,
	#tblDonaciones th {
		vertical-align: middle;
	}

	#tblDonaciones .btn-icon {
		width: 34px;
		height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	#tblDonaciones td.text-wrap {
		white-space: normal !important;
	}


	/* ===============================
   MODAL NUEVA DONACIÓN: igualar altura selects e inputs
   =============================== */

	#modalRegistroDonacion .form-control,
	#modalRegistroDonacion .form-control-sm,
	#modalRegistroDonacion .form-select,
	#modalRegistroDonacion .form-select-sm,
	#modalRegistroDonacion select {
		height: 38px !important;
		min-height: 38px !important;
		padding-top: .375rem !important;
		padding-bottom: .375rem !important;
		line-height: 1.2 !important;
	}

	/* Flechita/espacio derecha en selects */
	#modalRegistroDonacion .form-select,
	#modalRegistroDonacion .form-select-sm,
	#modalRegistroDonacion select {
		padding-right: 2rem !important;
	}

	#modalAlmacen .form-control-sm,
	#modalAlmacen .form-select-sm {
		height: 38px;
		/* puedes usar 36 o 40 si quieres */
		padding-top: .375rem;
		padding-bottom: .375rem;
		line-height: 1.2;
	}

	/* Ajuste flecha en selects */
	#modalAlmacen .form-select-sm {
		padding-right: 2rem;
	}