/* ---------------------------------------------------------------------
   Estilo general de botones/pestañas: "levantado" (normal) y "hundido"
   (seleccionado, clase .button2). Solo estilo, sin cambios de layout.
   Pestañas: texto azul; seleccionada: texto oscuro.
   Boton cerrar (.btn-warning): fondo amarillo.
   Cargar DESPUES de eNDICC_BS4tabs.css.
 --------------------------------------------------------------------- */
:root {
	--ncs-btn-bg:        #ffffff;
	--ncs-btn-bg-hover:  #f4f6f8;
	--ncs-btn-bg-sel:    #d9dde1;
	--ncs-btn-text:      #007bff;
	--ncs-btn-text-sel:  #0056b3;
	--ncs-btn-warn:      #ffc107;
	--ncs-btn-warn-hov:  #ffca2c;
	--ncs-btn-warn-sel:  #e0a800;
	--ncs-btn-border:    rgba(0,0,0,.18);
	--ncs-btn-radius:    6px;
}

/* LEVANTADO */
.nav-tabs .nav-link,
.nav-tabs .btn {
	border: 1px solid var(--ncs-btn-border);
	border-radius: var(--ncs-btn-radius);
	margin-right: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6);
	text-shadow: none;
	transition: box-shadow .08s ease, background-color .08s ease, transform .08s ease;
}
.nav-tabs .nav-link {
	background: var(--ncs-btn-bg);
	color: var(--ncs-btn-text);
}
.nav-tabs .nav-link:hover {
	background: var(--ncs-btn-bg-hover);
	border-color: var(--ncs-btn-border);
	box-shadow: 0 3px 6px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.9);
}

/* BOTON CERRAR: amarillo */
.nav-tabs .btn-warning {
	background: var(--ncs-btn-warn);
	border-color: rgba(0,0,0,.18);
}
.nav-tabs .btn-warning:hover {
	background: var(--ncs-btn-warn-hov);
	box-shadow: 0 3px 6px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.6);
}

/* HUNDIDO: seleccionado o presionado */
.nav-tabs .nav-link.button2,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:active,
.nav-tabs .btn:active {
	background: var(--ncs-btn-bg-sel);
	color: var(--ncs-btn-text-sel);
	border-color: rgba(0,0,0,.30);
	box-shadow: inset 0 3px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.05);
	transform: translateY(1px);
}
.nav-tabs .btn-warning:active {
	background: var(--ncs-btn-warn-sel);
}

/* Texto de la pestana seleccionada en negrita */
.nav-tabs .nav-link.button2,
.nav-tabs .nav-link.active {
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   Botones circulares: info (fa-info-circle) y ayuda (fa-question-circle).
   Levantados; el seleccionado (.button2) hundido.
 --------------------------------------------------------------------- */
.nav-tabs .nav-link:has(> .fa-info-circle:only-child),
.nav-tabs .nav-link:has(> .fa-question-circle:only-child) {
	width: 38px;
	height: 38px;
	padding: 0;
	margin-top: 4px;
	border-radius: 50%;
	font-size: 1.15rem;
	flex: 0 0 auto;
}
.nav-tabs .nav-link:has(> .fa-info-circle:only-child).button2,
.nav-tabs .nav-link:has(> .fa-info-circle:only-child).active {
	color: var(--ncs-btn-text);
}

/* ---------------------------------------------------------------------
   Boton expandir (#btnExpand): letra azul, fondo blanco, resaltado.
 --------------------------------------------------------------------- */
.nav-tabs #btnExpand {
	background: #ffffff;
	color: var(--ncs-btn-text);
	border: 1px solid rgba(0,0,0,.25);
	box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 1px 0 #ffffff;
}
.nav-tabs #btnExpand:hover {
	background: #ffffff;
	color: #0056b3;
	box-shadow: 0 4px 8px rgba(0,0,0,.40);
}
.nav-tabs #btnExpand:active {
	background: #e9ecef;
	color: var(--ncs-btn-text-sel);
}

/* Botones dentro de tablas: ver eNDICC_botones_tabla.css */

/* ---------------------------------------------------------------------
   Pestanas del menu Laravel (.oem-tab y .oo-tab, ncs_ot_erp_menu): mismo estilo que
   .nav-link: levantadas, texto azul; la activa hundida y en negrita;
   info (fa-info-circle) circular.
 --------------------------------------------------------------------- */
.oem-tab,
.oo-tab {
	background: var(--ncs-btn-bg);
	color: var(--ncs-btn-text);
	border: 1px solid var(--ncs-btn-border);
	border-radius: var(--ncs-btn-radius);
	box-shadow: 0 2px 4px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6);
	text-shadow: none;
	transition: box-shadow .08s ease, background-color .08s ease, transform .08s ease;
}
.oem-tab:hover,
.oo-tab:hover {
	background: var(--ncs-btn-bg-hover);
	color: #0056b3;
	box-shadow: 0 3px 6px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.9);
}
.oem-tab.active,
.oem-tab:active,
.oo-tab.active,
.oo-tab:active {
	background: var(--ncs-btn-bg-sel);
	color: var(--ncs-btn-text-sel);
	font-weight: 700;
	border-color: rgba(0,0,0,.30);
	box-shadow: inset 0 3px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.05);
	transform: translateY(1px);
}
.oem-tab:has(> .fa-info-circle:only-child),
.oo-tab:has(> .fa-info-circle:only-child) {
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	font-size: 1.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.oem-tab:has(> .fa-info-circle:only-child) i,
.oo-tab:has(> .fa-info-circle:only-child) i { margin: 0; }

/* Tooltips de los botones: angostos y en varias lineas (los layouts Laravel los dejan en max-width:100%) */
.tooltip-inner {
	max-width: 320px;
	text-align: left;
	white-space: normal;
}

/* ---------------------------------------------------------------------
   Compatibilidad con theme_erp.css (body.themed): ese tema fuerza
   color/fondo de .nav-link con !important; se reafirma aqui el texto azul
   y el seleccionado en azul oscuro y negrita.
 --------------------------------------------------------------------- */
.themed .nav-tabs .nav-link:not(.button2):not(.active) {
	color: var(--ncs-btn-text) !important;
}
.themed .nav-tabs .nav-link:not(.button2):not(.active):hover {
	color: #0056b3 !important;
}
.themed .nav-tabs .nav-link.button2,
.themed .nav-tabs .nav-link.active {
	color: var(--ncs-btn-text-sel) !important;
	font-weight: 700 !important;
	background: var(--ncs-btn-bg-sel) !important;
}
.themed .nav-tabs .nav-link.button2 *,
.themed .nav-tabs .nav-link.active * {
	color: inherit;
}