/* ==========================================================================
   KidsCity - kc-ui.css
   Capa de mejoras de diseño táctil, responsive y accesibilidad.

   * Es ADITIVA: se carga la última y no sustituye a ningún fichero del tema.
     Para desactivarla basta con quitar el <link> de app/views/header.php.
   * No cambia colores de marca, estructura ni funcionalidad.
   * Perfiles: iPad / tablets (panel de administración) y móviles (clientes).
   ========================================================================== */

:root {
	--kc-tap: 44px;               /* tamaño mínimo recomendado de un objetivo táctil */
	--kc-focus: #009ef7;          /* color del anillo de foco (azul de marca) */
	--kc-muted: #5e6278;          /* texto secundario con contraste >= 4.5:1 sobre blanco */
	--kc-placeholder: #6b7089;
	--kc-gap: .5rem;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* ---------- Accesibilidad ------------------------------------------------ */

/* Foco visible para quien usa teclado (no molesta al tocar). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-link:focus-visible,
.page-link:focus-visible {
	outline: 3px solid var(--kc-focus);
	outline-offset: 2px;
	border-radius: .475rem;
}

/* Enlace "Saltar al contenido" (visible solo al enfocarlo con teclado). */
.kc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: #fff;
	color: #181c32;
	font-weight: 700;
	padding: .75rem 1rem;
	border-radius: .475rem;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
}
.kc-skip:focus { left: .5rem; top: .5rem; }

/* Respeta la preferencia de "reducir movimiento" del sistema. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Contraste del texto secundario y placeholders (solo tema claro). */
body:not(.dark-mode) .text-muted { color: var(--kc-muted) !important; }
/* (se excluyen los campos con etiqueta flotante, cuyo placeholder debe seguir transparente) */
body:not(.dark-mode) :not(.form-floating) > .form-control::placeholder,
body:not(.dark-mode) :not(.form-floating) > .form-select::placeholder,
body:not(.dark-mode) :not(.form-floating) > textarea::placeholder { color: var(--kc-placeholder); opacity: 1; }

/* Que un campo deshabilitado/seleccionado no dependa solo del color. */
.btn-check:checked + .btn { box-shadow: inset 0 0 0 2px currentColor; }

/* ---------- Táctil (iPad y móviles) -------------------------------------- */

@media (pointer: coarse) {

	/* Botones e iconos con zona de pulsación cómoda. */
	.btn { min-height: var(--kc-tap); }
	.btn.btn-icon,
	.btn-icon { min-width: var(--kc-tap); min-height: var(--kc-tap); }

	/* iOS hace zoom automático al enfocar un campo con fuente < 16px y
	   deja la página ampliada: se evita fijando 16px. */
	.form-control,
	.form-select,
	input[type="text"], input[type="tel"], input[type="email"], input[type="password"],
	input[type="number"], input[type="search"], input[type="date"], input[type="time"],
	select, textarea {
		font-size: 16px !important;
	}
	.form-control, .form-select { min-height: 48px; }
	.select2-container .select2-selection--single,
	.select2-container--bootstrap5 .select2-selection { min-height: 48px; }
	.select2-search__field, .select2-selection__rendered { font-size: 16px !important; }
	.select2-results__option { padding: .85rem 1rem !important; }   /* opciones fáciles de tocar */

	/* Casillas y botones de radio más grandes. */
	.form-check-input { width: 1.6rem; height: 1.6rem; }
	.form-check-input[type="checkbox"], .form-check-input[type="radio"] { margin-top: 0; }

	/* Acciones en tablas: separación para no pulsar la contigua. */
	table td .btn + .btn,
	table td a.btn + a.btn,
	table td .btn + a.btn { margin-top: .4rem; }
	table td > .btn, table td > a.btn { margin: .2rem; }

	/* Los tooltips de pasar el ratón no existen al tocar: no los mostramos. */
	.tooltip { display: none !important; }

	/* Menú lateral: sin ratón no hay tooltip, así que se muestra el nombre bajo el icono.
	   (kc-ui.js rellena data-kc-label a partir del title de cada opción). */
	#kt_aside .menu-item > .menu-link[data-kc-label] {
		flex-direction: column;
		height: auto;
		min-height: 64px;
		padding: .5rem .25rem;
	}
	#kt_aside .menu-item > .menu-link[data-kc-label]::after {
		content: attr(data-kc-label);
		display: block;
		margin-top: .35rem;
		max-width: 5.5rem;
		font-size: .7rem;
		font-weight: 600;
		line-height: 1.15;
		text-align: center;
		color: #cfd3e4;
		word-break: break-word;
	}
	#kt_aside .menu-item > .menu-link.active::after,
	#kt_aside .menu-item.here > .menu-link::after,
	#kt_aside .menu-item.show > .menu-link::after { color: #fff; }
	#kt_aside .menu-sub .menu-link[data-kc-label]::after { content: none; }  /* los submenús ya llevan texto */
}

/* ---------- Cabecera ------------------------------------------------------ */

/* Móviles: el botón de menú quedaba fuera de la pantalla (422px sobre 390px). */
@media (max-width: 575.98px) {
	#kt_header .header-container { padding-left: .75rem !important; padding-right: .75rem !important; }
	#kt_header .header-logo { margin-right: .5rem !important; }
	#kt_header .header-logo img { height: 42px !important; width: auto; }
	#kt_header .topbar > .d-flex { margin-left: .4rem !important; }
	#kt_header .topbar .btn-icon,
	#kt_header .topbar .btn.btn-icon {
		width: 40px !important; height: 40px !important;
		min-width: 40px; min-height: 40px;
	}
	#kt_header .topbar .btn.btn-active-light { padding-left: .25rem !important; padding-right: .25rem !important; }
	#kt_header #kt_aside_toggle { margin-left: .25rem !important; }

	/* Más ancho útil: contenedores y tarjetas con menos margen lateral. */
	.container-xxl { padding-left: .75rem; padding-right: .75rem; }
	.card .card-header { padding-left: 1rem; padding-right: 1rem; }
	.card .card-body { padding: 1rem; }
}

/* ---------- Formularios --------------------------------------------------- */

/* "Forma de pago": tres botones en 330px de ancho se solapaban y se cortaban en
   iPad vertical; se apilan hasta que hay sitio real. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	#formapago .row { --bs-gutter-y: .5rem; }
	#formapago .row > .col { flex: 0 0 100%; width: 100%; max-width: 100%; }
	#formapago .btn { height: auto !important; padding: 1rem 1.25rem !important; }
}
.btn-outline-dashed .text-dark { white-space: normal; }

/* Botones de etiqueta larga no se cortan. */
.btn { white-space: normal; }
.btn.btn-icon { white-space: nowrap; }

/* ---------- Modales y teclado virtual ------------------------------------- */

.modal { -webkit-overflow-scrolling: touch; }
.modal-dialog { max-width: calc(100% - 1rem); }
@media (min-width: 576px) { .modal-dialog { max-width: var(--bs-modal-width, 500px); } }
/* En pantallas bajas (teclado abierto) el contenido del modal hace scroll. */
@media (max-height: 700px) {
	.modal-dialog-centered { align-items: flex-start; }
	.modal-content { max-height: calc(100vh - 1rem); overflow-y: auto; }
}

/* ---------- Listado de estancias (iPad vertical y móviles) ---------------- */

#kt_docs_datatable_estancias { width: 100% !important; }

/* iPad vertical y tablets estrechas: la columna Acciones quedaba cortada. */
@media (min-width: 768px) and (max-width: 1099.98px) {
	#kt_docs_datatable_estancias th,
	#kt_docs_datatable_estancias td { padding-left: .5rem; padding-right: .5rem; }
	#kt_docs_datatable_estancias th.min-w-150px,
	#kt_docs_datatable_estancias th.min-w-200px,
	#kt_docs_datatable_estancias th.tmin-w-150px { min-width: 0 !important; }
	#kt_docs_datatable_estancias td:last-child { white-space: nowrap; width: 1%; }
	#kt_docs_datatable_estancias .fs-5 { font-size: 1.05rem !important; }
}

/* Móviles: cada estancia pasa de fila de tabla a tarjeta. */
@media (max-width: 767.98px) {
	#kt_docs_datatable_estancias thead { display: none; }
	#kt_docs_datatable_estancias,
	#kt_docs_datatable_estancias tbody { display: block; width: 100%; }
	#kt_docs_datatable_estancias tbody tr {
		display: grid;
		grid-template-columns: 2.25rem 3.25rem minmax(0, 1fr);
		column-gap: .75rem;
		row-gap: .5rem;
		align-items: center;
		padding: .9rem .25rem;
		border-bottom: 1px dashed #e4e6ef;
	}
	#kt_docs_datatable_estancias tbody td {
		display: block;
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
	}
	#kt_docs_datatable_estancias tbody td.d-none { display: none !important; }
	#kt_docs_datatable_estancias tbody td:nth-child(1) { grid-column: 1; grid-row: 1; }
	#kt_docs_datatable_estancias tbody td:nth-child(4) { grid-column: 2; grid-row: 1; }
	#kt_docs_datatable_estancias tbody td:nth-child(5) { grid-column: 3; grid-row: 1; }
	#kt_docs_datatable_estancias tbody td:nth-child(6) { grid-column: 1 / -1; grid-row: 2; }
	#kt_docs_datatable_estancias tbody td:nth-child(7) { grid-column: 1 / 3; grid-row: 3; }
	#kt_docs_datatable_estancias tbody td:nth-child(8) { grid-column: 3; grid-row: 3; text-align: right !important; justify-self: end; white-space: nowrap; }
	#kt_docs_datatable_estancias .dataTables_wrapper { overflow: visible; }
}

/* Paginación de DataTables: botones tocables y con salto de línea. */
@media (pointer: coarse) {
	.dataTables_wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; float: none; }
	.dataTables_wrapper .dataTables_paginate .paginate_button { min-width: var(--kc-tap); min-height: var(--kc-tap); display: inline-flex; align-items: center; justify-content: center; }
	.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info { text-align: center; float: none; }
}

/* ---------- Seguridad de desbordes --------------------------------------- */

img, video { max-width: 100%; }
.table-responsive, .dataTables_wrapper { max-width: 100%; }

/* El menú lateral está fuera de pantalla hasta que se abre (cajón fijo a la derecha);
   en móvil ampliaba el ancho de la página unos píxeles. "clip" no crea contenedor de scroll. */
@supports (overflow-x: clip) {
	html, body { overflow-x: clip; }
}

/* Buscadores de las cabeceras de tarjeta (p. ej. listado de estancias): en móvil ocupan
   el ancho disponible en lugar de dos campos fijos de 250px en fila. */
@media (max-width: 767.98px) {
	.card-header .card-title { flex-wrap: wrap; width: 100%; margin-right: 0; }
	.card-header .card-title > .d-flex.position-relative { width: 100%; margin-left: 0 !important; }
	.card-header .card-title .w-250px { width: 100% !important; }
	.card-header .card-toolbar { width: 100%; margin: .5rem 0 0; }
}

/* Avatar + nº de percha del listado: no se estrecha al reducirse las columnas. */
#kt_docs_datatable_estancias .symbol { flex-shrink: 0; width: 45px; min-width: 45px; }
#kt_docs_datatable_estancias .symbol img { width: 45px; height: 45px; object-fit: contain; }
#kt_docs_datatable_estancias td:nth-child(4) { width: 1%; }

/* Menú lateral táctil: con etiquetas bajo los iconos caben más opciones en pantalla baja
   (iPad horizontal = 768px de alto). */
@media (pointer: coarse) {
	#kt_aside .menu-item.py-3 { padding-top: .3rem !important; padding-bottom: .3rem !important; }
	#kt_aside .menu-item > .menu-link[data-kc-label] { min-height: 56px; }
}

#formapago { margin-bottom: 1rem; }