/* =========================================================
   traceMe: estilo comun sobre Bootstrap 4.6

   Las vistas se escribieron para Bootstrap 2.3 (btn-mini, input-xlarge,
   table-condensed, modal "hide", etc.). En lugar de reescribir cada vista,
   aqui se adaptan esas clases y se define el aspecto comun. Se carga despues
   de bootstrap.min.css y de estilos.css, por eso puede pisarlos.

   Tamanos: con <meta name="viewport"> el telefono dibuja a escala 1:1, asi
   que los tamanos van en px reales. 16px en los campos es el minimo para que
   iOS no haga zoom al enfocarlos: no bajarlo.
========================================================= */

:root {
	--tm-verde: #1e7a46;
	--tm-verde-claro: #e8f4ec;
	--tm-gris: #f4f5f7;
	--tm-borde: #d9dde3;
	--tm-texto: #24292f;
	--tm-texto-suave: #6a737d;
}

/* ---------- base (estilos.css fijaba 12px y margenes) ---------- */

html, body {
	height: auto;
}

body {
	margin: 0;
	padding: 72px 0 24px;
	background: #fff;
	color: var(--tm-texto);
	font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

table, td, a {
	font: inherit;
}

td, th {
	color: inherit;
}

a {
	color: var(--tm-verde);
}

h1, h2, h3, h4, h5 {
	font-family: inherit;
}

/* ---------- contenedores con ancho porcentual que usan las vistas ---------- */

.container-40, .container-50, .container-60, .container-70,
.container-80, .container-90, .container-95, .container-100 {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 12px;
	padding-right: 12px;
}

@media (min-width: 992px) {
	.container-40 { max-width: 40%; min-width: 560px; }
	.container-50 { max-width: 50%; min-width: 620px; }
	.container-60 { max-width: 60%; min-width: 680px; }
	.container-70 { max-width: 70%; }
	.container-80 { max-width: 80%; }
	.container-90 { max-width: 90%; }
	.container-95 { max-width: 95%; }
}

/* el contenedor del layout ocupa todo el ancho de la pantalla (el encabezado
   de cada vista va de borde a borde, con 12px de margen) */
body > .container-95 {
	max-width: none;
	padding: 0 12px;
}

/* la tabla principal de cada vista usa todo el ancho, alineada con el
   encabezado: traceme.js marca con esta clase los contenedores que la rodean */
.ancho-pantalla {
	max-width: none !important;
	min-width: 0 !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
table#tablaPrincipal {
	width: 100% !important;
}

/* ---------- menu ---------- */

#menuPrincipal {
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

#menuPrincipal .navbar-brand img {
	width: 30px;
	height: auto;
}

#menuPrincipal .nav-link {
	color: rgba(255, 255, 255, .85);
	font-weight: 500;
}

#menuPrincipal .nav-link:hover,
#menuPrincipal .nav-link:focus {
	color: #fff;
}

#menuPrincipal .dropdown-item {
	color: var(--tm-texto);
	padding: 6px 20px;
}

#menuPrincipal .dropdown-item:active {
	background: var(--tm-verde);
	color: #fff;
}

#menuPrincipal .dropdown-header {
	color: var(--tm-verde);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .04em;
}

.navbar-toggler .texto-menu {
	font-size: 14px;
	vertical-align: middle;
	margin-left: 4px;
}

/* tablet y telefono: menu desplegado como lista, con objetivos tactiles grandes */
@media (max-width: 991.98px) {
	#menuOpciones {
		max-height: calc(100vh - 60px);
		overflow-y: auto;
		padding-bottom: 8px;
	}
	#menuPrincipal .nav-link {
		font-size: 17px;
		padding: 10px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}
	#menuPrincipal .dropdown-menu {
		background: #2b3035;
		border: 0;
		margin: 0 0 6px;
	}
	#menuPrincipal .dropdown-item {
		color: rgba(255, 255, 255, .85);
		font-size: 16px;
		padding: 9px 20px;
	}
	#menuPrincipal .dropdown-item:hover {
		background: rgba(255, 255, 255, .08);
		color: #fff;
	}
	#menuPrincipal .dropdown-header {
		color: #8fd1a8;
	}
	#menuPrincipal .dropdown-divider {
		border-color: rgba(255, 255, 255, .1);
	}
}

/* ---------- encabezado de cada vista ---------- */

.encabezado-vista {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--tm-gris);
	border: 1px solid var(--tm-borde);
	border-left: 4px solid var(--tm-verde);
	border-radius: 6px;
	padding: 10px 16px;
	margin: 0 0 16px;
}

.encabezado-titulo {
	font-size: 19px;
	font-weight: 600;
	margin: 0;
	line-height: 1.25;
}

.encabezado-subtitulo {
	color: var(--tm-texto-suave);
	font-size: 13px;
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.encabezado-logo {
	max-height: 45px;
	max-width: 120px;
	width: auto;
	flex-shrink: 0;
}

@media (max-width: 575.98px) {
	.encabezado-vista { padding: 8px 12px; }
	.encabezado-titulo { font-size: 16px; }
	.encabezado-logo { max-height: 34px; max-width: 80px; }
}

/* ---------- carga ---------- */

.cargando {
	text-align: center;
	padding: 60px 0;
}

/* la vista muestra #mostrarmostrar con style.display="block": la carga sobra */
#mostrarmostrar[style*="block"] + #progressbar {
	display: none;
}

/* ---------- botones (Bootstrap 2) ---------- */

.btn {
	margin: 2px;
	font-weight: 500;
	white-space: normal;
}

/* en Bootstrap 2 .btn solo ya era un boton gris; en 4 es transparente */
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-light):not(.btn-dark):not(.btn-link):not([class*="btn-outline"]) {
	color: var(--tm-texto);
	background: #fff;
	border-color: #b9c0c8;
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not(.btn-light):not(.btn-dark):not(.btn-link):not([class*="btn-outline"]):hover {
	background: var(--tm-gris);
}

.btn-success {
	background: var(--tm-verde);
	border-color: var(--tm-verde);
}

.btn-mini, .btn-small {
	padding: 4px 12px;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 4px;
}

/* boton para elegir archivo (input file oculto dentro de un .btn) */
.btn-file {
	position: relative;
	overflow: hidden;
}

.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* ---------- campos de formulario (Bootstrap 2 los estilaba sin clase) ---------- */

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=search], input:not([type]), select, textarea {
	border: 1px solid #b9c0c8;
	border-radius: 4px;
	padding: 3px 8px;
	min-height: 30px;
	background-color: #fff;
	color: var(--tm-texto);
	max-width: 100%;
	box-sizing: border-box;
	vertical-align: middle;
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--tm-verde);
	box-shadow: 0 0 0 3px rgba(30, 122, 70, .18);
}

input[disabled], input[readonly], select[disabled], textarea[disabled] {
	background-color: var(--tm-gris);
	color: var(--tm-texto-suave);
}

.input-mini    { width: 70px; }
.input-small   { width: 100px; }
.input-Small   { width: 100px; }
.input-medium  { width: 160px; }
.input-large   { width: 220px; }
.input-xlarge  { width: 290px; }
.input-xxlarge { width: 540px; }

/* ---------- tablas ---------- */

.table {
	margin-bottom: 12px;
	background: #fff;
}

.table-condensed th, .table-condensed td {
	padding: 4px 8px;
}

.table thead th, .table > tbody > tr > th {
	background: var(--tm-gris);
	vertical-align: middle;
	font-weight: 600;
}

/* Bootstrap 4 pone .table-responsive en el contenedor; las vistas lo
   pusieron en la tabla (display:block la angosta). El scroll lo aporta el
   contenedor que agrega traceme.js. */
table.table-responsive {
	display: table;
}

.tabla-envuelta {
	margin-bottom: 12px;
}

.tabla-envuelta > .table {
	margin-bottom: 0;
}

.table-hover tbody tr:hover > td {
	background: var(--tm-verde-claro);
}

/* iconos de modificar / eliminar / ver */
td img[src*="/images/"] {
	max-height: 24px;
	width: auto;
	cursor: pointer;
}

.celda-accion {
	text-align: center;
	white-space: nowrap;
	width: 1%;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input {
	width: 100%;
	max-width: 340px;
	margin-left: 0;
}

.dataTables_wrapper .dataTables_filter label {
	width: 100%;
	margin: 0;
}

.dataTables_wrapper .dataTables_length select {
	width: auto;
	display: inline-block;
}

.dataTables_wrapper .dataTables_info {
	color: var(--tm-texto-suave);
	font-size: 13px;
	padding-top: 0 !important;
}

.dataTables_wrapper .pagination {
	margin: 0;
}

.page-item.active .page-link {
	background: var(--tm-verde);
	border-color: var(--tm-verde);
}

.page-link {
	color: var(--tm-verde);
}

table.dataTable {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* flechas de orden mas visibles */
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after {
	opacity: .35;
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
	opacity: 1;
	color: var(--tm-verde);
}

/* arbol de inventarios (treegrid usa los iconos de Bootstrap 2) */
.treegrid-expander {
	display: inline-block;
	width: 16px;
	font-style: normal;
	cursor: pointer;
	color: var(--tm-verde);
}

.icon-chevron-right:before { content: "\25B8"; }
.icon-chevron-down:before  { content: "\25BE"; }

/* ---------- modales (Bootstrap 2 los ocultaba con .hide) ---------- */

.hide {
	display: none;
}

.modal.show .modal-dialog {
	max-width: 1100px;
}

.modal-header {
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	background: var(--tm-gris);
}

.modal-title {
	font-size: 17px;
	font-weight: 600;
}

.modal-body {
	overflow-x: auto;
}

/* ---------- utilidades de Bootstrap 2 ---------- */

.pull-right { float: right; }
.pull-left  { float: left; }
.caret { display: none; }

/* ---------- formularios armados con tablas ---------- */

.tabla-form td {
	vertical-align: middle;
}

/* ---------- tablet ---------- */

@media (max-width: 991.98px) {
	body {
		padding-top: 66px;
	}
}

/* ---------- telefono ---------- */

@media (max-width: 767.98px) {

	/* campos de 16px: iOS no hace zoom al enfocarlos */
	input[type=text], input[type=password], input[type=number], input[type=date],
	input[type=email], input[type=search], input:not([type]), select, textarea {
		font-size: 16px;
		min-height: 40px;
	}

	.input-mini, .input-small, .input-Small {
		max-width: 100%;
	}

	.input-medium, .input-large, .input-xlarge, .input-xxlarge {
		width: 100% !important;
	}

	/* objetivos tactiles de al menos 40px */
	.btn, .btn-mini, .btn-small {
		min-height: 40px;
		padding: 8px 14px;
		font-size: 14px;
	}

	td img[src*="/images/"] {
		max-height: 30px;
	}

	/* formulario en tabla (etiqueta | campo): se apila en una columna */
	.tabla-form,
	.tabla-form > tbody,
	.tabla-form > tbody > tr,
	.tabla-form > tbody > tr > td,
	.tabla-form > tbody > tr > th,
	.tabla-form > tr,
	.tabla-form > tr > td {
		display: block;
		width: 100% !important;
		border: 0;
	}

	.tabla-form > tbody > tr,
	.tabla-form > tr {
		border-bottom: 1px solid var(--tm-borde);
		padding: 4px 0;
	}

	.tabla-form > tbody > tr > td,
	.tabla-form > tr > td {
		padding: 3px 4px;
		text-align: left !important;
	}

	.tabla-form > tbody > tr > td:first-child:not(:only-child) {
		font-weight: 600;
		font-size: 13px;
		color: var(--tm-texto-suave);
		padding-bottom: 0;
	}

	.tabla-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
	.tabla-form select,
	.tabla-form textarea {
		width: 100% !important;
	}

	.dataTables_wrapper .dataTables_filter input {
		max-width: none;
	}

	.dataTables_wrapper .dataTables_length {
		text-align: left !important;
	}

	.modal-dialog {
		margin: 8px;
	}
}

/* ---------- impresion ---------- */

@media print {
	body { padding-top: 0; }
	.noprint, #menuPrincipal, .dataTables_filter, .dataTables_length,
	.dataTables_paginate, .dataTables_info, .aviso-scroll {
		display: none !important;
	}
	.table-responsive { overflow: visible !important; }
	.encabezado-vista { border: 0; background: none; padding: 0; }
}

/* venia de main.css: tablas con alto maximo y scroll vertical */
.fijaCabecera {
	overflow-y: auto;
	max-height: 60vh;
}

/* ---------- ingreso ---------- */

.pagina-ingreso {
	min-height: calc(100vh - 100px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tarjeta-ingreso {
	width: 100%;
	max-width: 380px;
	border: 1px solid var(--tm-borde);
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
	padding: 28px 24px 22px;
	background: #fff;
}

.tarjeta-ingreso .logos {
	text-align: center;
	margin-bottom: 18px;
}

.tarjeta-ingreso .logos img {
	max-width: 100%;
	height: auto;
}

.tarjeta-ingreso label {
	font-weight: 600;
	font-size: 13px;
	color: var(--tm-texto-suave);
	margin-bottom: 2px;
}

.tarjeta-ingreso input {
	width: 100%;
	min-height: 42px;
	font-size: 16px;
	margin-bottom: 12px;
}

.tarjeta-ingreso .btn {
	width: 100%;
	margin: 6px 0 0;
	min-height: 44px;
	font-size: 16px;
}

/* ---------- #formulario (estilos.css lo fijaba en 620px) ---------- */

#formulario {
	width: auto;
	max-width: 620px;
	border: 1px solid var(--tm-borde);
	background: var(--tm-gris);
	border-radius: 8px;
}

#formulario dl {
	margin: 0 0 10px;
}

#formulario dt label {
	float: none;
	width: auto;
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	color: var(--tm-texto-suave);
	margin: 0;
}

#formulario dd {
	margin: 0;
}

#formulario input {
	float: none;
	width: 100%;
	font-size: 14px;
	padding: 4px 8px;
	border-color: #b9c0c8;
}

#formulario dd.info, #formulario dd.error {
	font-size: 12px;
	color: var(--tm-texto-suave);
}

@media (max-width: 767.98px) {
	#formulario input { font-size: 16px; }
}

/* boton "Cambiar PDF": las vistas le ponen height:15px en linea */
.btn-file {
	height: auto !important;
	font-size: 13px !important;
}

@media (max-width: 767.98px) {
	/* detalle editable (compras, ventas, OT, recetas): ancho minimo legible,
	   la tabla se desplaza dentro de su contenedor */
	.tabla-edicion {
		min-width: 760px;
	}
}

/* ---------- inicio: accesos rapidos ---------- */

.saludo-inicio {
	font-size: 16px;
	margin: 0 0 14px;
}

.panel-inicio {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
}

.tarjeta-inicio {
	border: 1px solid var(--tm-borde);
	border-top: 3px solid var(--tm-verde);
	border-radius: 8px;
	background: #fff;
	padding: 12px 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.tarjeta-inicio h2 {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 8px;
	color: var(--tm-verde);
}

.tarjeta-inicio .accesos {
	display: flex;
	flex-direction: column;
}

.tarjeta-inicio .acceso {
	display: block;
	padding: 8px 6px;
	border-radius: 4px;
	color: var(--tm-texto);
	text-decoration: none;
	border-bottom: 1px solid var(--tm-gris);
}

.tarjeta-inicio .acceso:hover {
	background: var(--tm-verde-claro);
	color: var(--tm-verde);
}

.tarjeta-inicio .acceso:after {
	content: "\203A";
	float: right;
	color: var(--tm-texto-suave);
}

.tarjeta-inicio .acceso-grupo {
	font-size: 12px;
	font-weight: 600;
	color: var(--tm-texto-suave);
	text-transform: uppercase;
	margin: 8px 0 2px;
}

@media (max-width: 767.98px) {
	.tarjeta-inicio .acceso {
		padding: 11px 6px;
		font-size: 16px;
	}

	/* reportes y listados: una linea por celda; la tabla se desplaza de lado */
	.tabla-envuelta > table:not(.tabla-form):not(.tabla-edicion) td,
	.tabla-movil table.dataTable td {
		white-space: nowrap;
	}
}

/* ---------- auditoria ---------- */

.filtro-auditoria {
	background: var(--tm-gris);
	border: 1px solid var(--tm-borde);
	border-radius: 8px;
	padding: 12px 12px 4px;
	margin-bottom: 16px;
}

.filtro-auditoria label {
	font-weight: 600;
	font-size: 13px;
	color: var(--tm-texto-suave);
	margin-bottom: 2px;
}

.filtro-auditoria .btn {
	min-height: 38px;
}

.tabla-auditoria .detalle-auditoria {
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--tm-texto-suave);
	word-break: break-all;
}