/* ==========================================================================
  VIÑAMETRICS - SISTEMA DE DISEÑO COMÚN
    Este archivo centraliza la identidad visual global y compartida de la plataforma.
    Se rige por el principio de componentes reutilizables (prefijo vm-*).

  ÍNDICE DE SECCIONES:
    01. CONFIGURACIÓN, VARIABLES Y FUENTES (:root, body resets)
    02. COMPONENTES GLOBALES Y REUTILIZABLES (prefijo vm-*)
      - Cabeceras y Títulos (vm-page-header, vm-page-title)
      - Tarjetas (vm-card)
      - Botones Premium (vm-btn, vm-btn-action)
      - Formularios de Datos (vm-form-control, vm-input)
      - Utilidades y Barras de Herramientas (vm-toolbar)
    03. LAYOUT GLOBAL DE LA PLATAFORMA
      - Estructura Base, Sidebar y Navbar Comunes
      - Modales y Fondos de Carga
    04. MAPAS BASE (Estilos de Leaflet y capas base compartidas)
    05. UNIFICACIÓN DE TABLAS (vm-table y DataTables común)
    06. MODOS ESPECIALES (Modo Agricultor / Operario de Campo)
    07. MEDIA QUERIES & RESPONSIVE GLOBAL
   ========================================================================== */

/* 
  01. CONFIGURACIÓN Y FUENTES 
   -------------------------------------------------------------------------- */
:root {
  --vm-primary: #4e73df;
  --vm-bg-light: #f8f9fc;
  --vm-danger: #e74a3b;
  --vm-warning: #f6c23e;
  --vm-white: #fff;
  --vm-success: #1cc88a;
  --vm-info: #36b9cc;
  --vm-text-dark: #5a5c69;
  --vm-text-muted: #858796;
  --vm-border: #e3e6f0;
  --vm-input-text: #6e707e;
  --vm-input-border: #d1d3e2;
  --vm-input-text-focus: #2e3b4e;
  --vm-input-border-focus: #bac8f3;
}

body {
  font-family:
    'Nunito',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif !important;
}

/* 
  02. COMPONENTES GLOBALES (DESIGN SYSTEM)
   -------------------------------------------------------------------------- */

/* Sidebar */
.vm-sidebar {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Sidebar: el brand (logo) se queda pegado arriba mientras el resto scrollea.
  Fondo opaco del mismo color del degradado en esa zona para tapar los ítems
   que pasan por debajo al hacer scroll. */
.vm-sidebar .sidebar-brand {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #0871b5;
}

/* Estructura y Títulos de Páginas */
.vm-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
@media (max-width: 991.98px) {
  .vm-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.vm-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #2e3b4e;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vm-page-subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vm-text-muted);
}

/* Migas de pan de navegación multinivel (Bodega / Embotellado) */
#navigation-breadcrumbs:not(:empty) {
  margin-top: -1rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.vm-section-title {
  color: var(--vm-primary);
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
}

/* Tarjetas (vm-card) */
.vm-card {
  background-color: var(--vm-white);
  border-radius: 15px;
  border: 0;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
  margin-bottom: 1.5rem;
}

.vm-card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--vm-bg-light);
  background-color: var(--vm-white);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.vm-card-body {
  padding: 1.5rem;
}

.vm-card .card-header {
  background-color: var(--vm-white);
  border-bottom: 1px solid var(--vm-bg-light);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 1rem 1.25rem;
}

/* Botones Premium y Variantes */
.vm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
}

.vm-btn:focus {
  outline: none;
}

.vm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.vm-btn-primary {
  background-color: var(--vm-primary);
  color: var(--vm-white);
}
.vm-btn-primary:hover {
  background-color: #2e59d9;
  color: var(--vm-white);
}

.vm-btn-success {
  background-color: var(--vm-success);
  color: var(--vm-white);
}
.vm-btn-success:hover {
  background-color: #17a673;
  color: var(--vm-white);
}

.vm-btn-danger {
  background-color: var(--vm-danger);
  color: var(--vm-white);
}
.vm-btn-danger:hover {
  background-color: #c0392b;
  color: var(--vm-white);
}

.vm-btn-action.vm-btn-success {
  background: var(--vm-success);
  color: var(--vm-white);
  border-color: var(--vm-success);
}
.vm-btn-action.vm-btn-success:hover {
  background: #17a673;
  border-color: #17a673;
}

.vm-btn-info {
  background-color: var(--vm-info);
  color: var(--vm-white);
}
.vm-btn-info:hover {
  background-color: #2c9faf;
  color: var(--vm-white);
}

.vm-btn-light {
  background-color: var(--vm-bg-light);
  border-color: #d1d3e2;
  color: var(--vm-primary);
}
.vm-btn-light:hover {
  background-color: #eaecf4;
  border-color: #bac8f3;
  color: var(--vm-primary);
}

.vm-btn-outline-danger {
  background-color: transparent;
  border-color: var(--vm-danger);
  color: var(--vm-danger);
}
.vm-btn-outline-danger:hover {
  background-color: var(--vm-danger);
  border-color: var(--vm-danger);
  color: var(--vm-white);
}

.vm-btn-outline-success {
  background-color: transparent;
  border-color: var(--vm-success);
  color: var(--vm-success);
}
.vm-btn-outline-success:hover {
  background-color: var(--vm-success);
  border-color: var(--vm-success);
  color: var(--vm-white);
}

.vm-btn-outline-primary {
  background-color: transparent;
  border-color: var(--vm-primary);
  color: var(--vm-primary);
}
.vm-btn-outline-primary:hover {
  background-color: var(--vm-primary);
  border-color: var(--vm-primary);
  color: var(--vm-white);
}

.vm-btn-outline-info {
  background-color: transparent;
  border-color: var(--vm-info);
  color: var(--vm-info);
}
.vm-btn-outline-info:hover {
  background-color: var(--vm-info);
  border-color: var(--vm-info);
  color: var(--vm-white);
}

.vm-btn-outline-warning {
  background-color: transparent;
  border-color: var(--vm-warning);
  color: var(--vm-warning);
}
.vm-btn-outline-warning:hover {
  background-color: var(--vm-warning);
  border-color: var(--vm-warning);
  color: var(--vm-white);
}

.vm-btn-outline-dark {
  background-color: transparent;
  border-color: #5a5c69;
  color: #5a5c69;
}
.vm-btn-outline-dark:hover {
  background-color: #5a5c69;
  border-color: #5a5c69;
  color: var(--vm-white);
}

.btn-xs,
.vm-btn.btn-xs {
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  min-height: auto;
}

/* Scrollbars e inercia táctil en iOS */
[style*='overflow-y: auto'],
[style*='overflow-x: auto'],
[style*='overflow: auto'],
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Utilidades y Componentes de Toolbar (Globales) */
.vm-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vm-toolbar-group {
  min-width: 280px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Botón Outline Activo (Toggle) */
.vm-btn-outline.active,
.vm-btn-outline:active {
  background-color: var(--vm-primary) !important;
  border-color: var(--vm-primary) !important;
  color: var(--vm-white) !important;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.2) !important;
}

.vm-btn-outline {
  background-color: transparent;
  border-color: #d1d3e2;
  color: var(--vm-text-dark);
}
.vm-btn-outline:hover {
  background-color: var(--vm-bg-light);
  border-color: #b7b9cc;
  color: #3a3b45;
}

/* Botones de Acción en Tablas (vm-btn-action) */
.vm-btn-action {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 1px solid var(--vm-border);
  background: var(--vm-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vm-btn-action i {
  font-size: 0.85rem;
}

.vm-btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.vm-btn-edit {
  color: var(--vm-text-muted);
}
.vm-btn-edit:hover {
  background-color: var(--vm-bg-light);
  color: var(--vm-primary);
  border-color: var(--vm-primary);
}

.vm-btn-delete {
  color: var(--vm-danger);
  border-color: #fadbd8;
}
.vm-btn-delete:hover {
  background-color: var(--vm-danger);
  color: var(--vm-white);
  border-color: var(--vm-danger);
}

.vm-btn-view {
  color: var(--vm-primary);
}
.vm-btn-view:hover {
  background-color: var(--vm-primary);
  color: var(--vm-white);
  border-color: var(--vm-primary);
}

/* Formularios: Inputs y Etiquetas */
.vm-form-control,
.vm-input {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--vm-input-text);
  background-color: var(--vm-white);
  background-clip: padding-box;
  border: 1px solid var(--vm-input-border);
  border-radius: 0.6rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.vm-form-control:focus,
.vm-input:focus {
  color: var(--vm-input-text-focus);
  background-color: var(--vm-white);
  border-color: var(--vm-input-border-focus);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.vm-form-control:disabled,
.vm-input:disabled,
.vm-select:disabled {
  background-color: var(--vm-bg-light);
  color: var(--vm-text-muted);
  cursor: not-allowed;
}

.vm-form-control.vm-field-invalid,
.vm-input.vm-field-invalid {
  border-color: var(--vm-danger);
}

.vm-form-control.flex-fill,
.vm-input.flex-fill {
  min-width: 0;
}

/* Selects nativos con apariencia corporativa: evita el flash del estilo default del navegador
   antes de que enhanceSelect sustituya el select por el input de búsqueda. */
select.vm-form-control,
select.vm-input,
select.vm-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%236e707e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px;
  padding-right: 2.25rem;
}

.vm-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vm-text-muted);
  letter-spacing: 0.5px;
}

/* Checkbox custom con label small: centra el indicador visual y el icono con el texto reducido */
.custom-checkbox .custom-control-label.small::before,
.custom-checkbox .custom-control-label.small::after {
  top: 0.1rem;
}

/* Switches custom en barras y toolbars: centra la pastilla deslizante con el texto del label */
.custom-switch {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}
.custom-switch .custom-control-label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  font-size: 0.85rem;
}
.custom-switch .custom-control-label::before {
  top: calc(50% - 0.5rem);
}
.custom-switch .custom-control-label::after {
  top: calc(50% - 0.5rem + 2px);
}

/* Excepción para Input Groups (Botones adyacentes a Selects) */
.input-group {
  flex-wrap: nowrap !important;
}

.input-group > .vm-form-control,
.input-group > .vm-input {
  position: relative;
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  margin-bottom: 0;
}
.input-group > .input-group-append > .vm-btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Acoplamiento de campos con botón de alta rápida lateral (+) */
.d-flex.align-items-stretch:has(.admin-only:not(.d-none) .btn-add-maestro) .flex-grow-1 .vm-input,
.d-flex.align-items-stretch:has(.admin-only:not(.d-none) .btn-add-maestro)
  .flex-grow-1
  .vm-form-control,
.d-flex.align-items-stretch:has(.admin-only:not(.d-none) .btn-add-maestro) .flex-grow-1 .vm-select {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.d-flex.align-items-stretch .flex-grow-1 .vm-input:focus,
.d-flex.align-items-stretch .flex-grow-1 .vm-form-control:focus,
.d-flex.align-items-stretch .flex-grow-1 .vm-select:focus {
  position: relative;
  z-index: 3;
}

.btn-add-maestro {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0.6rem !important;
  border-bottom-right-radius: 0.6rem !important;
  margin-left: -1px;
  position: relative;
  z-index: 2;
  min-height: unset;
  height: 100%;
}

/* Autocomplete dropdown */
.vm-autocomplete-dropdown {
  position: absolute;
  z-index: 1050;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--vm-input-border);
  border-top: none;
  border-radius: 0 0 0.35rem 0.35rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.vm-autocomplete-dropdown.vm-dropup {
  top: auto;
  bottom: 100%;
  border-top: 1px solid var(--vm-input-border);
  border-bottom: none;
  border-radius: 0.35rem 0.35rem 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}
.vm-autocomplete-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--vm-input-text);
  transition: background 0.12s;
}
.vm-autocomplete-item:hover,
.vm-autocomplete-item-active {
  background: #eaecf4;
  color: #3a3b45;
}

/* Botón "x" para limpiar el autocomplete */
.vm-autocomplete-clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--vm-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  z-index: 2;
}
.vm-autocomplete-clear:hover {
  color: var(--vm-danger);
}

/* Botón chevron para abrir dropdown (junto a la X) */
.vm-autocomplete-chevron {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--vm-text-muted);
  padding: 0 0.25rem;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
}
.vm-autocomplete-chevron:hover {
  color: var(--vm-input-border-focus);
}

/* Contenedor del autocomplete con dropdown posicionado (sustituye al style inline) */
.vm-autocomplete-wrap {
  position: relative;
}

/* Autocomplete en modo select (noSearch): cursor pointer — el chevron es un botón separado (.vm-autocomplete-chevron) */
.vm-autocomplete-wrapper input.vm-input[readonly] {
  cursor: pointer;
  background-color: var(--vm-white);
}

/* Tarjetas de Indicadores / KPI Cards */
.vm-kpi-card {
  border: 0;
  border-radius: 15px;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
  background-color: var(--vm-white);
  transition: transform 0.2s ease-in-out;
}

.vm-kpi-card:hover {
  transform: scale(1.02);
}

.vm-kpi-primary {
  border-left: 4px solid var(--vm-primary);
}

.vm-kpi-danger {
  border-left: 4px solid var(--vm-danger);
}

.vm-kpi-info {
  border-left: 4px solid var(--vm-info);
}

.vm-kpi-success {
  border-left: 4px solid var(--vm-success);
}

.vm-kpi-warning {
  border-left: 4px solid var(--vm-warning);
}

.vm-card-title {
  margin: 0;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--vm-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === 03. LAYOUT & LOGIN ===
    Layout general y login.
*/

#content-wrapper {
  overflow-x: clip !important;
  min-width: 0;
}

#topbarContainer,
#nav-agricultor {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* Fondo corporativo para la pantalla de Login */
.bg-login-image {
  background: url('../img/fondo_viñedo.webp') no-repeat center center fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* Estilo para los modales de la aplicación */
.modal-content {
  background-color: #3b4652;
  opacity: 0.95;
  padding: 20px;
  border-radius: 10px;
}

.form-group input {
  height: 42px;
  font-size: 16px;
  padding-left: 20px;
  border-radius: 5px;
}

/* Sidebar: Transiciones suaves para el modo colapsado/expandido (UX) */
.sidebar {
  transition: width 0.2s ease-in-out;
}

/* Sidebar: abrimos los submenús SIN animación de escala ni transiciones que
   re-flujen el texto. SB Admin aplica growIn (scale 0.9→1) + transiciones de
   altura/min-width que hacían que el texto cambiara de 1 a 2 líneas durante
   la apertura. Forzamos que el contenido se muestre en su layout final. */
.sidebar .nav-item .collapse,
.sidebar .nav-item .collapsing,
.sidebar.toggled .nav-item .collapse,
.sidebar.toggled .nav-item .collapsing {
  -webkit-animation-name: none;
  animation-name: none;
  transform: none;
  transition: none;
}

/* Sidebar: los textos de los submenús se ajustan al ancho sin desbordar.
   SB Admin fuerza white-space: nowrap con especificidad alta; lo anulamos con
   la MISMA especificidad (main.css se carga después y gana el empate). */
.sidebar .nav-item .collapse .collapse-inner .collapse-item {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Sidebar: buscador de páginas */
.vm-sidebar-search {
  position: relative;
  margin: 0 0.75rem 0.5rem;
}

.vm-sidebar-search i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.vm-sidebar-search input {
  width: 100%;
  padding: 0.45rem 0.75rem 0.45rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.35rem;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.85rem;
}

.vm-sidebar-search input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.vm-sidebar-search input:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Modo colapsado: ocultamos el buscador y dejamos solo iconos */
.sidebar.toggled .vm-sidebar-search {
  display: none;
}

/* Sidebar: ocultamos elementos que no coinciden con la búsqueda */
.sidebar .vm-search-hidden {
  display: none !important;
}

/* Sidebar: item activo más visible — barra lateral + fondo tenue.
   Aplica a links del dropdown y a submenús anidados. */
.sidebar .nav-item .collapse .collapse-inner .collapse-item.vm-sidebar-link.active,
.sidebar .nav-item .collapse .collapse-inner .collapse-item.vm-sidebar-toggle.active,
.sidebar .nav-item .collapse .collapse-inner .collapse-item.vm-sidebar-toggle.vm-open {
  position: relative;
  background-color: rgba(78, 115, 223, 0.08);
  color: #4e73df;
  font-weight: 700;
  padding-left: calc(1rem + 3px);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.vm-sidebar-link.active::before,
.sidebar .nav-item .collapse .collapse-inner .collapse-item.vm-sidebar-toggle.active::before,
.sidebar .nav-item .collapse .collapse-inner .collapse-item.vm-sidebar-toggle.vm-open::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: 3px;
  background-color: #4e73df;
}

/* Heading de sección: la barra "estás aquí" SOLO aparece con la sidebar
   colapsada (.toggled). Con la sidebar abierta no hace falta marcarlo: el
   propio dropdown abierto ya indica en qué sección estamos. */
.sidebar.toggled .nav-item.vm-sidebar-section.active > .nav-link {
  position: relative;
  padding-left: calc(0.75rem + 3px);
}

.sidebar.toggled .nav-item.vm-sidebar-section.active > .nav-link::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 3px;
  border-radius: 3px;
  background-color: #fff;
  opacity: 0.9;
}

.sidebar .nav-item .nav-link span {
  white-space: normal;
}

/* Modo colapsado: los labels largos de sección ("Embotellado y Acondicionamiento")
   y los encabezados de texto ("ADMINISTRACIÓN") se parten palabra por palabra
   para no pegarse al borde de la sidebar. */
.sidebar.toggled .nav-item .nav-link span,
.sidebar.toggled .sidebar-heading {
  overflow-wrap: break-word;
  word-break: break-word;
}

.sidebar.toggled .nav-item .nav-link span {
  padding: 0 0.25rem;
}

/* Chevron de las secciones: SB Admin lo pone con float: right, lo que hacía
   que con textos largos el chevron se descolocara (quedaba debajo del heading,
   pegado al blanco del dropdown). Lo fijamos con posición absoluta, centrado
   verticalmente, y damos padding-right al heading para que el texto no quede
   debajo del chevron. */
.sidebar .nav-item .nav-link[data-toggle='collapse'] {
  position: relative;
  padding-right: 2rem;
}

/* Modo colapsado (toggled): el chevron del dropdown se oculta, así que el
   padding-right reservado para él ya no hace falta y descentraría el icono
   (misma especificidad que el padding 1rem de SB Admin, pero main.css gana
   por orden de carga). Lo devolvemos al padding estándar para que el icono
   quede centrado como el heading. */
.sidebar.toggled .nav-item .nav-link[data-toggle='collapse'] {
  padding-right: 0.75rem;
}

/* Modo colapsado: reducimos el padding horizontal del nav-link (1rem → 0.75rem)
   para que palabras largas como "Mantenimiento" quepan en una sola línea sin
   partirse con guion. Con este ancho caben también "Administración",
   "Envejecimiento" y "Microbiológico"; solo "Acondicionamiento" sigue
   partiéndose por ser más largo de lo que admite la sidebar colapsada. */
.sidebar.toggled .nav-item .nav-link {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.sidebar .nav-item .nav-link[data-toggle='collapse']::after {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  float: none;
  width: 1rem;
  text-align: center;
}

/* Los collapses anidados (submenú dentro de submenú) no deben heredar el
   margin: 0 1rem que SB Admin aplica a los collapses de nivel superior. */
.sidebar .nav-item .collapse .collapse-inner .collapse {
  margin: 0;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-inner {
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
}

/* Submenús anidados de la sidebar: chevron en los collapse-item que expanden.
   Usamos la MISMA especificidad que la regla .collapse-item de SB Admin
   (0,5,0) + elemento/atributo para que el padding-right y el position ganen;
   si no, el texto largo pasaba por encima del chevron. */
.sidebar .nav-item .collapse .collapse-inner a[data-toggle='collapse'] {
  position: relative;
  padding-right: 2rem;
}

.sidebar .nav-item .collapse .collapse-inner a[data-toggle='collapse']::after {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
  content: '\f105';
  font-size: 0.7rem;
  color: #b7b9cc;
}

.sidebar .nav-item .collapse .collapse-inner a[data-toggle='collapse']:not(.collapsed)::after {
  content: '\f107';
}

/* --- ESTILOS LEGADO ---
    Compatibilidad con alertas y tooltips antiguos.
*/
.alert {
  cursor: pointer;
  position: relative;
}

/* === 04. MAPAS (LEAFLET & MAPBOXES) === 
    Configuración de capas y contenedores geográficos.
*/

#map_parcelas {
  z-index: 1;
}

.leaflet-control-layers {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: none;
  padding: 6px 10px;
}

.leaflet-control-layers-list {
  font-size: 0.85rem;
  font-weight: 600;
}

/* =========================================================
   11. MODOS ESPECIALES (Modo Agricultor / Trabajador)
   =========================================================
   Estilos específicos para alternar la vista simplificada de campo
   destinada a los operarios (agricultor-first layout).
*/

/* Por defecto, la barra de agricultor está oculta */
#nav-agricultor {
  display: none !important;
}

/* Cuando el body tiene esta clase, aplicamos los cambios visuales */
.mode-agricultor #accordionSidebar,
.mode-agricultor #content-wrapper .navbar,
.mode-agricultor footer {
  display: none !important;
}

.mode-agricultor #content-wrapper {
  margin-left: 0;
  width: 100%;
}

.mode-agricultor #nav-agricultor {
  display: flex !important;
}

/* =========================================================
   10. UNIFICACIÓN DE TABLAS Y SELECTORES (.vm-table, .vm-select)
   =========================================================
   Estandarización del diseño de tablas responsivas (DataTables) 
   y desplegables corporativos de Viñametrics.
*/

/* Contenedor envolvente con bordes redondeados y sombra sutil */
.vm-table-wrap {
  border: 1px solid var(--vm-border);
  border-radius: 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--vm-white);
  box-shadow: 0 0.15rem 0.4rem rgba(58, 59, 69, 0.06);
  margin-bottom: 1.5rem;
}

/* Tabla estilizada */
table.vm-table,
table.dataTable.vm-table {
  width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--vm-white);
}

/* Bordes redondeados en las celdas de las esquinas */
.vm-table thead tr:first-child th:first-child {
  border-top-left-radius: 0.85rem;
}
.vm-table thead tr:first-child th:last-child {
  border-top-right-radius: 0.85rem;
}
.vm-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.85rem;
}
.vm-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.85rem;
}

.vm-table thead th {
  background-color: var(--vm-bg-light);
  border-bottom: 2px solid var(--vm-border);
  border-top: none;
  border-left: none;
  border-right: none;
  color: #b7b9cc;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Reservamos 1.8rem a la derecha para que las flechas de ordenación de DataTables no pisen el texto */
  padding: 1rem 1.8rem 1rem 0.9rem;
  vertical-align: middle;
  position: relative;
}

.vm-table tbody td {
  padding: 1rem 0.9rem;
  border-top: 1px solid var(--vm-bg-light);
  border-bottom: none;
  border-left: none;
  border-right: none;
  vertical-align: middle;
  color: var(--vm-text-dark);
  font-size: 0.88rem;
}

/* Efecto hover suave en las celdas */
.vm-table tbody tr:hover td {
  background-color: #f8fbff;
  color: #2e3b4e;
}

/* Ocultar elementos de paginación e información si la tabla está vacía (empty state visible) */
.dataTables_wrapper:has(.dataTables_empty) .dataTables_info,
.dataTables_wrapper:has(.dataTables_empty) .dataTables_paginate {
  display: none !important;
}

/* Selectores estilizados de diseño corporativo (mismo aspecto que .vm-form-control + chevron) */
.vm-select {
  display: block;
  width: 100%;
  padding: 0.6rem 2.25rem 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--vm-input-text);
  background-color: var(--vm-white);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%236e707e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px;
  border: 1px solid var(--vm-input-border);
  border-radius: 0.6rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.vm-select:focus {
  color: var(--vm-input-text-focus);
  background-color: var(--vm-white);
  border-color: var(--vm-input-border-focus);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

/* Panel Gestión avanzada: acciones siempre en columna (sin d-flex de Bootstrap: !important rompe display:none en JS) */
/* Estilos de parcelas y asistente (wizard) aislados en parcelas.css */

/* === 16. DETALLES Y CONTROLES DE TABLAS (DataTables) === */

/* Fondo completo de cabecera para evitar la barra blanca superior */
.vm-table thead {
  background-color: var(--vm-bg-light);
}

/* Texto de información (Mostrando X registros...) */
.dataTables_wrapper .dataTables_info {
  color: var(--vm-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: left;
  padding-left: 0.5rem;
}

/* Paginación de DataTables */
.dataTables_wrapper .dataTables_paginate {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--vm-primary);
  background-color: var(--vm-white);
  border: 1px solid #dddfeb;
  border-radius: 0.35rem;
  margin-right: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
  color: var(--vm-white);
  background-color: var(--vm-primary);
  border-color: var(--vm-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active {
  color: var(--vm-white);
  background-color: var(--vm-primary);
  border-color: var(--vm-primary);
  cursor: default;
  box-shadow: 0 0.125rem 0.25rem rgba(78, 115, 223, 0.25);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--vm-text-muted);
  background-color: var(--vm-bg-light);
  border-color: #dddfeb;
  cursor: not-allowed;
  opacity: 0.6;
}

/* =========================================================
   12. MEDIA QUERIES & RESPONSIVE DESIGN
   =========================================================
   Adaptación de la interfaz a tablets y dispositivos móviles.
*/

/* --- Utilidades de Toolbar y Botones Responsivos (Globales) --- */
@media (max-width: 1024px) {
  .vm-toolbar-group {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
}

@media (max-width: 768px) {
  /* En iOS/Safari, inputs con font-size menor a 16px fuerzan un zoom involuntario al enfocar */
  .vm-form-control,
  .vm-input,
  .vm-select,
  select.vm-form-control,
  select.vm-input,
  select.vm-select {
    font-size: 16px;
  }

  .vm-toolbar-group {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .vm-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
  }

  .vm-toolbar .vm-btn {
    width: 100%;
    padding: 0.45rem 0.55rem;
    font-size: 0.84rem;
    min-height: 34px;
  }

  /* Paginación de DataTables centrada y con salto de línea en pantallas pequeñas */
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    justify-content: center !important;
  }

  .dataTables_wrapper .dataTables_paginate ul.pagination {
    justify-content: center !important;
    flex-wrap: wrap;
  }
}

/* Modales claros (Fondo blanco) */
.modal-light .modal-content,
.vm-modal-rounded {
  background-color: var(--vm-white);
  color: #5a5c69;
  opacity: 1;
  border: 0;
  padding: 0;
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  overflow: visible;
}

.modal-light .modal-body {
  position: relative;
  z-index: 5;
}

.modal-light .modal-footer {
  position: relative;
  z-index: 1;
}

/* Badges e Indicadores de Estado (Design System) */
.vm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.vm-badge-sm {
  font-size: 0.85rem;
  padding: 0.4em 0.7em;
}

/* Utilidades de modal reutilizables: herencia exacta de curvatura */
.modal-light .modal-header,
.vm-modal-header-rounded {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.modal-light .modal-footer,
.vm-modal-footer-rounded {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.vm-modal-icon-wrapper {
  width: 45px;
  height: 45px;
}

.vm-modal-title {
  font-size: 1.1rem;
}

/* Tarjeta de carga para spinners — movido a modules/Tareas/css/ver_tareas.css */

/* Alerta con border-radius reducido — movido a modules/Tareas/css/calendario.css */

/* Utilidad para truncado de descripciones en tablas — movido a modules/Mantenimiento/css/ */

/* Tabs de navegación unificadas — movido a modules/Flota/css/itv_iteaf.css */

/* Estandarización global de insignias Bootstrap */
.badge {
  border-radius: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.35em 0.65em;
  line-height: 1;
}

/* Alineación vertical en Topbar y Dropdowns */
.topbar .nav-item {
  display: flex;
  align-items: center;
}

.topbar .dropdown-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

/* Evitar flash azul en el botón de cerrar sesión del dropdown */
.topbar .dropdown-item#btnLogout:hover,
.topbar .dropdown-item#btnLogout:focus {
  background-color: rgba(231, 74, 59, 0.08) !important;
  color: var(--vm-danger) !important;
}

.topbar .dropdown-item#btnLogout:active {
  background-color: rgba(231, 74, 59, 0.15) !important;
  color: var(--vm-danger) !important;
}

/* Eliminar borde / outline del navegador al pulsar la cruz (x) de los modales */
.modal .close,
.modal .close:focus,
.modal .close:active,
.modal-header .close,
.modal-header .close:focus,
.modal-header .close:active {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Columna de observaciones en DataTables — movido a modules/Flota/css/mantenimientos.css */