/*
 * gvenlace-modern-v1.css
 * Modernización visual controlada para gvenlace / Smart Travel Expense. Incluye controles y delineado de tabs/folders.
 *
 * Objetivo:
 * - Mejorar legibilidad de textbox, dropdowns, listas, checkboxes, tablas y botones.
 * - Conservar colores, tipografías, layout, posiciones, ids, names, rutas y comportamiento existente.
 * - Evitar incremento de scroll: no se agregan márgenes verticales agresivos ni alturas excesivas.
 *
 * Cargar este archivo después de Bootstrap/Inspinia y estilos actuales del sistema.
 */

/* =========================================================
   Variables visuales conservadoras
   ========================================================= */

:root {
  --gv-text: #2f4050;
  --gv-muted: #676a6c;
  --gv-border: #b8c2cc;
  --gv-border-soft: #d5dbe1;
  --gv-border-hover: #9eacb8;
  --gv-focus: #1c84c6;
  --gv-focus-soft: rgba(28, 132, 198, 0.14);
  --gv-danger: #ed5565;
  --gv-danger-soft: rgba(237, 85, 101, 0.14);
  --gv-success: #1ab394;
  --gv-bg-readonly: #eef1f4;
  --gv-bg-table-head: #f3f6f8;
  --gv-radius: 5px;
}

/* =========================================================
   Formularios: textbox, textarea, selects nativos
   ========================================================= */

.form-control {
  height: 34px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--gv-text);
  background-color: #ffffff;
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control:hover {
  border-color: var(--gv-border-hover);
}

.form-control:focus {
  border-color: var(--gv-focus);
  box-shadow: 0 0 0 2px var(--gv-focus-soft);
  outline: 0;
}

textarea.form-control {
  height: auto;
  min-height: 68px;
  resize: vertical;
}

/* Mantiene campos informativos visibles sin que se pierdan contra fondos claros */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  color: #5f6b76;
  background-color: var(--gv-bg-readonly);
  border-color: #c8d0d8;
  opacity: 1;
}

/* Campos clave en autorización: se delinean sin moverlos ni cambiar layout */
input[name="motivoRechazo"],
textarea[name="motivoRechazo"],
input#motivoRechazo,
textarea#motivoRechazo {
  border-color: #9eacb8;
  background-color: #ffffff;
}

input[name="motivoRechazo"]:focus,
textarea[name="motivoRechazo"]:focus,
input#motivoRechazo:focus,
textarea#motivoRechazo:focus {
  border-color: var(--gv-danger);
  box-shadow: 0 0 0 2px var(--gv-danger-soft);
}

/* =========================================================
   Bootstrap select / selectpicker
   ========================================================= */

.bootstrap-select > .dropdown-toggle,
.bootstrap-select .btn {
  height: 34px;
  padding: 6px 10px;
  color: var(--gv-text);
  background-color: #ffffff;
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.025);
}

.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select .btn:hover {
  color: var(--gv-text);
  background-color: #ffffff;
  border-color: var(--gv-border-hover);
}

.bootstrap-select.open > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select .btn:focus {
  border-color: var(--gv-focus);
  box-shadow: 0 0 0 2px var(--gv-focus-soft);
  outline: 0;
}

.bootstrap-select .dropdown-menu {
  border-color: var(--gv-border-soft);
  border-radius: var(--gv-radius);
}

.bootstrap-select .dropdown-menu > li > a {
  padding: 6px 12px;
  color: var(--gv-text);
}

.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li > a:focus {
  background-color: #eef5fb;
  color: var(--gv-text);
}

/* =========================================================
   Listas y selects múltiples
   ========================================================= */

select.form-control[multiple],
select.form-control[size] {
  height: auto;
  min-height: 82px;
  padding: 4px;
}

select.form-control[multiple] option,
select.form-control[size] option {
  padding: 5px 8px;
  border-radius: 3px;
}

/* =========================================================
   Checkboxes / radios
   ========================================================= */

input[type="checkbox"],
input[type="radio"] {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  vertical-align: middle;
  accent-color: var(--gv-focus);
}

.checkbox label,
.radio label {
  color: var(--gv-text);
}

/* =========================================================
   Validaciones Bootstrap / jQuery validate
   ========================================================= */

.has-error .form-control,
.form-control.error,
input.error,
select.error,
textarea.error {
  border-color: var(--gv-danger);
  box-shadow: 0 0 0 2px var(--gv-danger-soft);
}

.has-error .help-block,
.has-error .control-label,
label.error {
  color: var(--gv-danger);
}

.has-success .form-control {
  border-color: var(--gv-success);
}

/* =========================================================
   Tablas / DataTables: legibilidad sin cambiar comportamiento
   ========================================================= */

.table {
  color: var(--gv-text);
}

.table > thead > tr > th {
  font-weight: 600;
  color: var(--gv-text);
  background-color: var(--gv-bg-table-head);
  border-bottom: 1px solid var(--gv-border-soft);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  vertical-align: middle;
}

.table-hover > tbody > tr:hover {
  background-color: #f7fafc;
}

/* Mantiene DataTables compacto */
.dataTables_wrapper .dataTables_filter input {
  height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--gv-border);
  border-radius: var(--gv-radius);
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--gv-focus);
  box-shadow: 0 0 0 2px var(--gv-focus-soft);
  outline: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 4px;
}

/* =========================================================
   Botones: acabado visual moderado, sin cambiar ubicación
   ========================================================= */

.btn {
  border-radius: 5px;
  font-weight: 500;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.btn:hover,
.btn:focus {
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Separación mínima solo cuando dos botones están juntos */
.btn + .btn {
  margin-left: 5px;
}

/* Botones dentro de tablas: no crecer */
.table .btn,
.dataTable .btn {
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.4;
}

/* =========================================================
   Paneles legacy / ibox: limpieza suave, sin reestructurar
   ========================================================= */

.ibox {
  border-radius: 6px;
}

.ibox-title {
  border-color: var(--gv-border-soft);
}

.ibox-content {
  border-color: var(--gv-border-soft);
}

/* =========================================================
   Etiquetas y ayudas
   ========================================================= */

.control-label,
.col-form-label,
label {
  color: var(--gv-text);
  font-weight: 500;
}

.help-block,
.form-text,
.text-muted {
  color: var(--gv-muted);
}

/* =========================================================
   Seguridad visual:
   No ocultar elementos, no reordenar layout, no cambiar display global.
   ========================================================= */

/* =========================================================
   Tabs / folders: delineado visual tenue y pertenencia visual
   Integrado en gvenlace-modern-v1.css
   ========================================================= */

/* Tabs / folders: delineado visual tenue */
.nav-tabs {
  border-bottom: 1px solid #d9e1e8;
  margin-bottom: 0;
}

.nav-tabs > li > a {
  color: #7f8c99;
  background-color: #f7f9fb;
  border: 1px solid transparent;
  border-radius: 5px 5px 0 0;
  padding: 9px 17px;
  margin-right: 4px;
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  color: #2f4050;
  background-color: #fafbfd;
  border-color: #d9e1e8;
  border-bottom-color: transparent;
}

/* Pestaña activa: más clara y conectada al panel */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #2f4050;
  background-color: #ffffff;
  border: 1px solid #d9e1e8;
  border-bottom-color: #ffffff;
  font-weight: 600;
  position: relative;
  z-index: 3;
}

/* Línea tenue superior para indicar pestaña activa */
.nav-tabs > li.active > a:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1c84c6;
  border-radius: 5px 5px 0 0;
  opacity: .85;
}

/*
 * Aplicación automática cuando el proyecto usa .tab-content.
 * No altera funcionalidad; solo da borde tenue y fondo blanco.
 */
.tab-content {
  background-color: #ffffff;
  border: 1px solid #d9e1e8;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 16px 16px 14px 16px;
}

/*
 * Contenedor manual opcional.
 * Útil si una pantalla no usa .tab-content y se requiere envolver el contenido
 * con una clase específica sin afectar otras pantallas.
 */
.gv-folder-panel {
  background-color: #ffffff;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  padding: 16px 16px 14px 16px;
}

/*
 * Variante cuando el panel debe sentirse conectado directamente a una pestaña.
 */
.gv-folder-panel.gv-folder-panel-attached {
  border-top: none;
  border-radius: 0 0 6px 6px;
}

/* Bloques internos dentro del folder */
.gv-inner-panel {
  background-color: #ffffff;
  border: 1px solid #e2e8ee;
  border-radius: 6px;
  padding: 14px 14px 12px 14px;
  margin-bottom: 14px;
}

.gv-inner-panel:last-child {
  margin-bottom: 0;
}

/* Encabezados dentro de paneles */
.gv-folder-panel h1,
.gv-folder-panel h2,
.gv-folder-panel h3,
.gv-inner-panel h1,
.gv-inner-panel h2,
.gv-inner-panel h3,
.tab-content h1,
.tab-content h2,
.tab-content h3 {
  color: #2f4050;
  font-weight: 600;
}

/* Separador sutil entre secciones */
.gv-section-divider {
  border-top: 1px solid #e2e8ee;
  margin: 14px 0;
}

/* Tablas dentro de paneles */
.gv-folder-panel .table,
.gv-inner-panel .table,
.tab-content .table {
  margin-bottom: 14px;
}

.gv-folder-panel .table-bordered,
.gv-inner-panel .table-bordered,
.tab-content .table-bordered {
  border-color: #d9e1e8;
}

.gv-folder-panel .table > thead > tr > th,
.gv-inner-panel .table > thead > tr > th,
.tab-content .table > thead > tr > th {
  border-color: #d9e1e8;
}

.wrapper-content .gv-folder-panel {
  margin-top: 0;
}

/* =========================================================
   Ajuste específico para vistas legacy con tabs sin .tab-content
   Ejemplo: comprobaciones/consultar_transacciones_bbva.edge
   Estructura real:
   @include('viajes.menu') -> ul.nav-tabs
   #tabla  -> resumen_vcf
   #tabla2 -> consultar_vcfs
   ========================================================= */

/*
 * Esta pantalla no usa .tab-content; por eso el borde anterior no se veía.
 * Se delinea el contenido real usando #tabla y #tabla2, sin cambiar HTML.
 */
.nav.nav-tabs {
  border-bottom: 1px solid #d9e1e8;
  margin-bottom: 0;
}

.nav.nav-tabs .nav-link {
  color: #7f8c99;
  background-color: #f7f9fb;
  border: 1px solid transparent;
  border-radius: 5px 5px 0 0;
  padding: 9px 17px;
  margin-right: 4px;
  font-weight: 500;
}

.nav.nav-tabs .nav-link:hover,
.nav.nav-tabs .nav-link:focus {
  color: #2f4050;
  background-color: #fafbfd;
  border-color: #d9e1e8;
  border-bottom-color: transparent;
}

.nav.nav-tabs .nav-link.active {
  color: #2f4050;
  background-color: #ffffff;
  border: 1px solid #d9e1e8;
  border-bottom-color: #ffffff;
  font-weight: 600;
  position: relative;
  z-index: 3;
}

.nav.nav-tabs .nav-link.active:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1c84c6;
  border-radius: 5px 5px 0 0;
  opacity: .85;
}

/*
 * Panel visual para contenido de pestaña cuando no existe wrapper .tab-content.
 * Se aplica a #tabla y #tabla2 porque son los contenedores reales de la vista.
 */
.nav.nav-tabs ~ #tabla,
.nav.nav-tabs ~ #tabla2 {
  background-color: #ffffff;
  border-left: 1px solid #d9e1e8;
  border-right: 1px solid #d9e1e8;
  padding-left: 14px;
  padding-right: 14px;
}

/* Primer bloque del contenido del tab */
.nav.nav-tabs ~ #tabla {
  border-top: 1px solid #d9e1e8;
  border-radius: 6px 6px 0 0;
  padding-top: 16px;
  margin-top: 14px;
}

/* Segundo bloque del contenido del tab */
.nav.nav-tabs ~ #tabla2 {
  border-bottom: 1px solid #d9e1e8;
  border-radius: 0 0 6px 6px;
  padding-bottom: 16px;
}

/* Línea sutil entre los bloques internos de la pestaña */
.nav.nav-tabs ~ #tabla2:before {
  content: '';
  display: block;
  border-top: 1px solid #e2e8ee;
  margin: 4px 0 14px 0;
}

/* Mantiene tablas compactas dentro del panel */
.nav.nav-tabs ~ #tabla .table,
.nav.nav-tabs ~ #tabla2 .table {
  margin-bottom: 12px;
}

/* =========================================================
   Bordeado visual de formularios legacy
   Objetivo:
   - Delinear el formulario completo sin mover campos ni botones.
   - Mejorar lectura visual del bloque operativo.
   - Mantener densidad compacta y evitar incremento fuerte de scroll.
   ========================================================= */

/*
 * Aplica a formularios principales dentro del contenido autenticado.
 * Se excluyen formularios inline/navbar para no afectar buscadores,
 * filtros pequeños o controles embebidos.
 */
.wrapper-content form.form-horizontal:not(.form-inline),
.ibox-content form.form-horizontal:not(.form-inline),
.gv-folder-panel form.form-horizontal:not(.form-inline),
.tab-content form.form-horizontal:not(.form-inline) {
  background-color: #ffffff;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  padding: 14px 14px 12px 14px;
  margin-bottom: 14px;
}

/*
 * Variante para formularios que ya viven dentro de un panel/bloque con borde.
 * Mantiene el delineado más sutil para evitar doble borde pesado.
 */
.gv-inner-panel form.form-horizontal:not(.form-inline),
.ibox-content .gv-inner-panel form.form-horizontal:not(.form-inline) {
  border-color: #e6ebf0;
  padding: 12px;
}

/*
 * Separación compacta entre filas del formulario.
 * No se incrementa el espaciado vertical original de forma agresiva.
 */
.wrapper-content form.form-horizontal .form-group,
.ibox-content form.form-horizontal .form-group,
.gv-folder-panel form.form-horizontal .form-group,
.tab-content form.form-horizontal .form-group {
  margin-bottom: 12px;
}

/*
 * La última fila suele contener botones.
 * Se deja compacta y alineada con el patrón legacy.
 */
.wrapper-content form.form-horizontal .form-group:last-child,
.ibox-content form.form-horizontal .form-group:last-child,
.gv-folder-panel form.form-horizontal .form-group:last-child,
.tab-content form.form-horizontal .form-group:last-child {
  margin-bottom: 0;
}

/*
 * Formularios sin clase form-horizontal.
 * No se aplican globalmente para evitar afectar componentes pequeños.
 * Si se requiere, agregar clase manual opcional: gv-form-panel.
 */
.gv-form-panel {
  background-color: #ffffff;
  border: 1px solid #d9e1e8;
  border-radius: 6px;
  padding: 14px 14px 12px 14px;
  margin-bottom: 14px;
}

.gv-form-panel .form-group {
  margin-bottom: 12px;
}

.gv-form-panel .form-group:last-child {
  margin-bottom: 0;
}

/*
 * Título opcional dentro de un formulario delineado.
 */
.gv-form-panel-title {
  color: #2f4050;
  font-weight: 600;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8ee;
}

/* =========================================================
   Login MyTravelSite - tarjeta visual modernizada
   Alcance:
   - Solo afecta la pantalla de login mediante clases mts-login-*.
   - Conserva ruta, csrf, name=email, name=password, name=remember,
     id=password, id=show_password e id=acciones.
   - No afecta formularios internos, catálogos ni autorizaciones.
   ========================================================= */

.mts-login-wrapper {
  min-height: calc(100vh - 92px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 36px 10% 36px 24px;
}

.mts-login-card {
  width: 390px;
  max-width: 100%;
  color: #ffffff;
  background: linear-gradient(145deg, rgba(70, 151, 209, 0.96), rgba(38, 121, 184, 0.96));
  border: 1px solid rgba(154, 204, 238, 0.75);
  border-radius: 28px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  padding: 28px 30px 26px 30px;
}

.mts-login-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
}

.mts-login-lock {
  width: 44px;
  height: 44px;
  margin-right: 14px;
  border-radius: 50%;
  background: rgba(28, 132, 198, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.mts-login-title-block {
  line-height: 1.1;
}

.mts-login-title-small {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
}

.mts-login-title {
  font-size: 28px;
  font-weight: 500;
  color: #ffffff;
}

.mts-login-form {
  margin: 0;
}

.mts-login-field {
  margin-bottom: 16px;
}

.mts-login-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.mts-login-input-icon {
  width: 50px;
  min-width: 50px;
  height: 42px;
  border-radius: 8px 0 0 8px;
  background: rgba(28, 132, 198, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mts-login-input-icon img {
  width: 22px;
  height: 22px;
}

.mts-login-card .form-control {
  height: 42px;
  color: #2f4050;
  background-color: #ffffff;
  border: 1px solid rgba(190, 208, 225, 0.98);
  border-radius: 0 8px 8px 0;
  box-shadow: none;
  font-size: 14px;
}

.mts-login-card .form-control:focus {
  border-color: #f8ac59;
  box-shadow: 0 0 0 2px rgba(248, 172, 89, 0.22);
}

.mts-login-input-group .form-control {
  flex: 1 1 auto;
}

.mts-login-password-button {
  height: 42px;
  min-width: 50px;
  border-radius: 0 8px 8px 0;
  border: 1px solid #f8ac59;
  border-left: 0;
  background: #f8ac59;
  color: #ffffff;
  box-shadow: none;
}

.mts-login-password-button:hover,
.mts-login-password-button:focus {
  background: #f39c34;
  border-color: #f39c34;
  color: #ffffff;
}

.mts-login-password-group .form-control {
  border-radius: 0;
}

.mts-login-error {
  display: block;
  margin-top: 5px;
  color: #ffd8d8;
  font-size: 12px;
  text-align: left;
}

.mts-login-remember {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 18px 0;
  color: #ffffff;
  font-weight: 500;
}

.mts-login-remember input[type="checkbox"] {
  margin-right: 8px;
  margin-top: 0;
  width: 14px;
  height: 14px;
  accent-color: #f8ac59;
}

.mts-login-actions {
  margin-bottom: 18px;
}

.mts-login-submit {
  height: 44px;
  border-radius: 9px;
  background: linear-gradient(180deg, #f8ac59, #f28c18);
  border: 1px solid #f39c34;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(180, 94, 11, 0.22);
}

.mts-login-submit:hover,
.mts-login-submit:focus {
  background: linear-gradient(180deg, #f9b568, #f28c18);
  border-color: #f39c34;
  color: #ffffff;
}

.mts-login-forgot {
  text-align: center;
}

.mts-login-forgot a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
}

.mts-login-forgot a:hover,
.mts-login-forgot a:focus {
  color: #f8f8f8;
}

.mts-login-card .alert,
.mts-login-card .notification {
  margin-bottom: 14px;
  border-radius: 7px;
}

@media (max-width: 991px) {
  .mts-login-wrapper {
    justify-content: center;
    padding: 28px 18px;
  }

  .mts-login-card {
    width: 360px;
  }
}

@media (max-width: 575px) {
  .mts-login-card {
    width: 100%;
    padding: 24px 20px 22px 20px;
    border-radius: 20px;
  }

  .mts-login-title {
    font-size: 24px;
  }
}