body.login-page { background: #1b2a4e; }
.login-logo b { color: #fff; }

.wrapper { min-height: 100vh; }

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

.card-stat {
	border-left: 4px solid #04AA6D;
}
.card-stat.egreso { border-left-color: #dc3545; }
.card-stat.resultado { border-left-color: #007bff; }

.monto-ingreso { color: #04AA6D; font-weight: 600; }
.monto-egreso { color: #dc3545; font-weight: 600; }
.badge-anulado { text-decoration: line-through; opacity: .6; }

/* Pie de la tabla "Reportes > Movimientos": 3 celdas de resumen (Ingresos/Egresos/Saldo)
   una al lado de la otra, centradas, en vez de un solo bloque de texto amontonado. */
#tbl_reporte tfoot .rep-footer-total { text-align: center; }

.content-module { padding: 15px; }

#loading-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(255,255,255,.6);
	z-index: 99999;
	justify-content: center;
	align-items: center;
}

/* Bloqueo por licencia suspendida (ver views/functions.js, App.mostrarBloqueoLicencia).
   Más opaco y por encima de #loading-overlay a propósito: una vez que aparece,
   nada detrás debe quedar operable ni visible como si funcionara con normalidad. */
#licencia-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(33, 37, 41, .96);
	z-index: 999999;
	justify-content: center;
	align-items: center;
	padding: 20px;
}
#licencia-overlay .licencia-box {
	background: #fff;
	border-radius: 10px;
	max-width: 420px;
	width: 100%;
	padding: 32px 28px;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
#licencia-overlay .licencia-box i {
	font-size: 40px;
	color: #dc3545;
	margin-bottom: 14px;
}
#licencia-overlay .licencia-box h4 {
	margin: 0 0 10px;
	font-weight: 700;
}
#licencia-overlay .licencia-box p {
	margin: 0;
	color: #444;
	font-size: 14px;
	line-height: 1.5;
}

.form-required::after { content: " *"; color: #dc3545; }

.thumb-adjunto {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #ddd;
	margin: 4px;
}

/* Impresión de reportes con membrete (ver Branding.printButton en views/branding.js).
   Se imprime dentro de la misma pestaña (sin window.open) para evitar el crash de Chrome
   "RESULT_CODE_KILLED_BAD_MESSAGE" que puede ocurrir con la ventana emergente de impresión. */
#branding_print_area { display: none; }

/* Ticket interno de Ingresos (ver Branding.imprimirTicket en views/branding.js) -
   contenedor propio y aparte de #branding_print_area, con su propio ancho angosto
   tipo boleta de impresora térmica (78mm) en vez del ancho de tabla normal. */
#branding_ticket_area { display: none; }

/* ==========================================================================
   Responsivo / mobile (v20)
   El sistema usa AdminLTE 3.2 + Bootstrap 4, que ya resuelven el grid y el
   sidebar en pantallas chicas. Lo que faltaba (y generaba "ventanas" -
   modales y paneles - que no se ajustaban al dispositivo, obligando a
   scrollear el body completo hacia los costados) era: 1) tablas anchas sin
   .table-responsive (ver wrapping aplicado en views/*.js), y 2) estos
   ajustes de layout/controles que Bootstrap no cubre por sí solo.
   ========================================================================== */

/* Nunca debe aparecer scroll horizontal a nivel de página completa; si algo
   se desborda, que desborde dentro de su propio contenedor (ej. tabla). */
html, body { max-width: 100%; overflow-x: hidden; }
.content-wrapper { max-width: 100%; overflow-x: hidden; }

/* Encabezados de tarjeta con título + botón(es): que bajen de línea en vez
   de comprimirse o desbordar cuando no entran uno al lado del otro. */
.card-header.d-flex {
	flex-wrap: wrap;
	row-gap: 8px;
}
.card-header.d-flex > .card-title { margin-right: 8px; }

@media (max-width: 575.98px) {
	.content-module { padding: 10px; }
	.card-header.d-flex { align-items: flex-start; }
	.card-header.d-flex .btn { margin-top: 2px; }

	/* Los controles nativos de DataTables (largo de página / buscador /
	   info / paginación) vienen en filas Bootstrap que ya se apilan, pero
	   les falta aire vertical y el buscador queda muy angosto. */
	.dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
	.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
		text-align: left !important;
		margin-bottom: 8px;
	}
	.dataTables_filter input { width: 100%; margin-left: 0 !important; margin-top: 4px; }
	.dataTables_paginate { display: flex; justify-content: center; }

	/* Los botones de exportar (Excel/PDF/Imprimir) no deben quedar en una
	   sola fila rígida si no entran en el ancho disponible. */
	.dt-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
	.dt-buttons .btn { margin-bottom: 4px; }
}

/* Los inputs/select con font-size chico (< 16px, como .form-control-sm)
   hacen que Safari/iOS haga zoom automático al enfocarlos. Se sube a 16px
   solo en pantallas de celular para evitar ese zoom molesto. */
@media (max-width: 575.98px) {
	.form-control, .form-control-sm, .select2-container, .custom-select {
		font-size: 16px !important;
	}
}

/* Modales: en formularios largos (ej. Cuentas por pagar, Presupuestos) el
   contenido puede superar el alto de pantallas chicas. Se deja scrollear
   el cuerpo del modal en vez de todo el documento detrás. */
@media (max-width: 767.98px) {
	.modal-dialog {
		margin: .5rem;
		max-width: calc(100% - 1rem);
	}
	.modal-body {
		max-height: calc(100vh - 210px);
		overflow-y: auto;
	}
}

/* Botones de acción (editar/eliminar/pagar/abonar, etc.) dentro de tablas:
   tamaño mínimo de toque cómodo y separación entre ellos en celular. */
@media (max-width: 575.98px) {
	table.table td .btn-sm, table.table td .btn-group .btn {
		min-width: 32px;
		min-height: 32px;
		padding: 4px 6px;
		margin: 1px;
	}
}

@media print {
	body > *:not(#branding_print_area):not(#branding_ticket_area) { display: none !important; }
	#branding_print_area { display: block !important; padding: 20px; }
	#branding_ticket_area { display: block !important; }

	.branding-print-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
		border-bottom: 2px solid #1b2a4e;
		padding-bottom: 8px;
	}
	.branding-print-header img { height: 50px; }
	.branding-print-meta { text-align: right; }
	.branding-print-empresa { font-weight: bold; }
	.branding-print-titulo { font-size: 12px; color: #555; }
	.branding-print-fecha { font-size: 11px; color: #888; }

	#branding_print_area table { width: 100%; border-collapse: collapse; }
	#branding_print_area th,
	#branding_print_area td { border: 1px solid #ccc; padding: 4px 6px; font-size: 11px; text-align: left; }
	#branding_print_area th { background: #1b2a4e; color: #fff; }

	#branding_ticket_area .ticket { width: 78mm; margin: 0 auto; font-family: 'Courier New', monospace; font-size: 11px; padding: 3mm; }
	#branding_ticket_area .ticket img { max-width: 50mm; display: block; margin: 0 auto 4px; }
	#branding_ticket_area .ticket hr { border: none; border-top: 1px dashed #000; margin: 5px 0; }
	#branding_ticket_area .ticket table { width: 100%; font-size: 11px; border-collapse: collapse; }
	#branding_ticket_area .ticket table td { padding: 1px 0; vertical-align: top; border: none; }
	#branding_ticket_area .ticket .center { text-align: center; }
	#branding_ticket_area .ticket .right { text-align: right; }
	#branding_ticket_area .ticket .bold { font-weight: bold; }
	#branding_ticket_area .ticket .titulo { font-size: 13px; }
	#branding_ticket_area .ticket .monto { font-size: 14px; }
	#branding_ticket_area .ticket .anulado { color: #c00; }
	#branding_ticket_area .ticket .nota { font-size: 9px; color: #555; }
}