/* q-base.css — lo que el proyecto se queda por decisión propia.
 *
 * ── Qué es esto y qué NO es ─────────────────────────────────────────────────
 * Cuando se retiró Bootstrap 3 quedaban 17 reglas en el extracto de
 * compatibilidad. Al revisarlas una por una, casi todas apuntaban a clases que ya
 * se habían migrado —`form-inline`, `navbar-form`, `radio`, `checkbox`,
 * `control-label`, `has-feedback`, `form-group-lg/sm`, la fuente Glyphicons—: eran
 * reglas muertas y se borraron con el archivo.
 *
 * Las que siguen vivas son estas tres, y **no mantienen viva ninguna librería**:
 * son valores del proyecto, aplicados a clases del proyecto. Por eso viven aquí y
 * no en una capa de compatibilidad.
 *
 *   · `.q-campo` es lo que antes se llamaba `form-group`. El nombre cambió porque
 *     Bootstrap 5 no define esa clase: ya no era de Bootstrap, era nuestra. Lleva
 *     el espaciado vertical que el sistema usa entre campos.
 *
 *   · La altura de línea del cuerpo. Bootstrap 5 usa 1.5; MINARVIC venía con
 *     1.42857143 y toda su interfaz está compuesta con esa medida. Cambiarla
 *     movería el texto de las 117 pantallas, así que se conserva como decisión
 *     tipográfica del proyecto.
 *
 *   · El resaltado del toque en móvil, que Bootstrap 5 no desactiva.
 *
 * `.q-form-h` —antes `form-horizontal`— no necesita reglas base: lo que hacía en
 * Bootstrap 3 era dar márgenes negativos a su fila, y eso ahora lo aporta el
 * `.row` de Bootstrap 5 con sus canaletas. Sus 47 reglas propias siguen en
 * modern.css, renombradas.
 */

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  line-height: 1.42857143;
}

.q-campo {
  margin-bottom: 15px;
}

/* ── Jerarquía visual de los formularios ────────────────────────────────────
 * MINARVIC compone sus formularios con la etiqueta en negrita. Era Bootstrap 3
 * quien lo imponía —`label { font-weight: bold }`—, y Bootstrap 5 no lo hace: su
 * `.form-label` sólo define un margen inferior.
 *
 * No es una diferencia estética de la librería: la negrita separa el nombre del
 * campo de su contenido y es lo que permite recorrer un formulario de un vistazo.
 * Al perderla, pantallas como `clients` pasaban de siete rótulos destacados a
 * siete líneas de texto plano.
 *
 * Se declara aquí, en el CSS del proyecto y con la intención escrita, en vez de
 * repartir `fw-bold` por 1 000 etiquetas del marcado: es una regla de diseño de
 * la aplicación, no una decoración puntual.
 *
 * La excepción son las etiquetas de casilla y de radio, que Bootstrap 3 dejaba
 * en peso normal a propósito: ahí la etiqueta ES la opción, no su nombre.
 */
label {
  font-weight: 700;
  margin-bottom: 5px;
  max-width: 100%;
}

.form-check label,
.form-check-label,
.form-check-inline label {
  font-weight: 400;
  margin-bottom: 0;
}

/* ── Enlaces y botones: cuándo subraya MINARVIC ─────────────────────────────
 * Bootstrap 5.3 subraya TODOS los enlaces en reposo. Es una decisión suya, y
 * buena para texto corrido, pero MINARVIC no es texto corrido: casi todos sus
 * `<a>` son controles —acciones de tabla, elementos de menú, botones—. Con el
 * cambio aparecían 65 subrayados por pantalla que antes no existían, y un botón
 * como «Registrar Cliente» pasaba a leerse como un enlace.
 *
 * La regla del proyecto, que es la que tenía y la que se conserva:
 *
 *   · en reposo, un enlace NO se subraya;
 *   · al pasar el puntero o recibir el foco SÍ, porque ahí el subrayado informa
 *     de que el elemento responde;
 *   · lo que hace de botón no se subraya NUNCA, ni siquiera en hover: su
 *     afordancia es el propio botón, y el subrayado lo degrada a enlace.
 *
 * Se cubren las dos familias de botón: las de Bootstrap 5 (`.btn`) y las del
 * proyecto (`.q-btn`, `.btn-action`, los de la barra superior), porque
 * «Registrar Cliente» es `<a class="q-btn q-btn--primary">` y una regla que
 * mirase sólo `.btn` lo habría dejado fuera.
 */
a {
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

.btn, .btn:hover, .btn:focus, .btn:active, .btn:disabled, .btn.disabled,
.q-btn, .q-btn:hover, .q-btn:focus, .q-btn:active,
.btn-action, .btn-action:hover, .btn-action:focus,
.topbar-icon-btn, .topbar-icon-btn:hover, .topbar-icon-btn:focus,
.topbar-user-btn, .topbar-user-btn:hover, .topbar-user-btn:focus,
.nav-link, .nav-link:hover, .nav-link:focus,
.page-link, .page-link:hover, .page-link:focus,
.dropdown-item, .dropdown-item:hover, .dropdown-item:focus,
.topbar-dropdown-menu > li > a,
.topbar-dropdown-menu > li > a:hover,
.topbar-dropdown-menu > li > a:focus,
.paginate_button, .paginate_button:hover, .paginate_button:focus,
.paginate_button > a, .paginate_button > a:hover, .paginate_button > a:focus {
  text-decoration: none;
}

/* ── El galon del menu lateral ──────────────────────────────────────────────
 * AdminLTE lo posiciona con `.sidebar-menu li > a > .pull-right`. Al renombrar
 * esa clase a `float-end` la regla dejo de casar y el galon perdio su
 * posicion absoluta: quedaba solo con `float:right`, y con `white-space:nowrap`
 * en el enlace, un nombre de modulo largo lo empujaba a una segunda linea.
 * Se repone aqui con el nombre de Bootstrap 5, sin tocar AdminLTE.
 */
.sidebar-menu li > a > .float-end {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -7px;
}

/* ── El color de texto lo pone el proyecto, no Bootstrap ────────────────────
 * Bootstrap 5 declara `.card { color: var(--bs-body-color) }`. Antes daba igual
 * -no habia `.card` en el marcado-, pero al migrar la familia `panel` a `card`
 * esa regla empezo a aplicarse y le gano al color heredado del proyecto: 1 702
 * elementos pasaron del gris azulado #1E293B al #212529 de Bootstrap.
 *
 * La forma correcta de resolverlo no es pelear con la cascada con un selector
 * mas fuerte, sino apuntar el propio token de Bootstrap al color del proyecto.
 * Asi Bootstrap 5 sigue siendo la fuente de verdad del sistema de color y es el
 * proyecto quien le dice cual es su gris, que es exactamente para lo que la
 * version 5 expone estas variables.
 *
 * Se declara tambien en `body` para que el modo oscuro -que redefine
 * `--q-text-1` ahi- arrastre consigo el token de Bootstrap.
 */
:root { --bs-body-color: var(--q-text-1); --bs-body-color-rgb: 30, 41, 59; }
body  { --bs-body-color: var(--q-text-1); }

/* ── La barra superior no lleva galón ───────────────────────────────────────
 * Bootstrap 3 solo dibujaba el triangulito del desplegable cuando el marcado
 * incluía un `<span class="caret">`, y QUIPU nunca lo puso: en todo el árbol
 * original hay cero. Bootstrap 5 lo dibuja solo, con `.dropdown-toggle::after`,
 * y los tres botones de la barra superior amanecieron con un galón que nadie
 * había pedido.
 *
 * Se quita donde el diseño no lo tenía. No es una regla global: si mañana un
 * desplegable nuevo quiere su galón, Bootstrap 5 se lo dará.
 */
.topbar-icon-btn.dropdown-toggle::after,
.topbar-user-btn.dropdown-toggle::after { display: none; }

/* ── La pestaña activa: fondo azul y texto blanco ───────────────────────────
 * QUIPU pintaba la pestaña activa con fondo #01497c y texto blanco. Ese estilo
 * no estaba en ninguna hoja del proyecto: vivía dentro del `bootstrap.min.css`
 * de la 3, que era una compilación tematizada. Al borrar la librería se fue con
 * ella, y Bootstrap 5 —cuyo valor por omisión es el contrario: fondo blanco y
 * texto oscuro— dejó las pestañas de seis vistas con el aspecto de la librería
 * en vez del de la aplicación.
 *
 * Se repone con las variables que la propia 5 expone para esto. No es un parche
 * sobre su CSS: es el mecanismo que Bootstrap 5 ofrece para que un proyecto diga
 * cuáles son sus colores. Las vistas que ya definen su propia pestaña activa
 * —`#frmTicketCfg`, `.em-tabs`, `.chart-tabs-pro`, `.commerce-tabs`— siguen
 * mandando sobre esto, como antes.
 */
.nav-tabs {
  --bs-nav-tabs-link-active-color: #fff;
  --bs-nav-tabs-link-active-bg: #01497c;
  --bs-nav-tabs-link-active-border-color: #ddd #ddd transparent;
}
