/* ============================================================================
   MOBILE HEADER - TERRAVIX ENTERPRISE (≤614.4px)
   Diseño enterprise minimalista con accesibilidad WCAG 2.2 AA
   Mismos estilos que header desktop para consistencia visual
   ============================================================================ */

/* ------------------------------------------------------------------
   TOKENS DE DISEÑO ENTERPRISE (Heredados del header desktop)
   ------------------------------------------------------------------ */
:root {
  /* Usar mismos tokens que header-enterprise.css */
  --tvx-mobile-bg: var(--tvx-ent-bg-primary, #FFFFFF);
  --tvx-mobile-surface: var(--tvx-ent-bg-secondary, #F8FAFC);
  --tvx-mobile-text: var(--tvx-ent-text-primary, #0F172A);
  --tvx-mobile-muted: var(--tvx-ent-text-tertiary, #64748B);
  --tvx-mobile-border: var(--tvx-ent-border-light, #E6E9EE);
  --tvx-mobile-accent: var(--tvx-ent-accent-primary, #008C45);
  --tvx-mobile-accent-hover: var(--tvx-ent-accent-hover, #00753A);
  --tvx-mobile-focus: var(--tvx-ent-accent-40, rgba(0, 140, 69, 0.25));
  
  /* Mapeo Radzen */
  --rz-primary: var(--tvx-mobile-accent);
  --rz-on-primary: #FFFFFF;
  --rz-text: var(--tvx-mobile-text);
  --rz-border: var(--tvx-mobile-border);
  --rz-panel-background-color: var(--tvx-mobile-bg);
}

/* ------------------------------------------------------------------
   HEADER PRINCIPAL - Sticky con safe area
   ------------------------------------------------------------------ */
.tvx-header-mobile {
  position: sticky;
  top: 0;
  padding-top: env(safe-area-inset-top, 0);
  background: var(--tvx-mobile-bg);
  border-bottom: 1px solid var(--tvx-mobile-border);
  z-index: 1001; /* Debajo del sidebar drawer (1002) pero encima del overlay (999) */
  box-shadow: 0 1.6px 9.6px rgba(16, 24, 40, 0.06); /* Mismo shadow que desktop */
}

/* ------------------------------------------------------------------
   FILA 1 - AppBar (hamburguesa + logo + productor + avatar)
   ------------------------------------------------------------------ */
.tvx-row {
  display: flex;
  align-items: center;
  gap: 9.6px;
  padding: 6.4px 12.8px;
  min-height: 44.8px;
}

.tvx-row--appbar {
  padding: 8px 12.8px;
  min-height: 51.2px;
}

/* Botón Hamburguesa - Accesible (mismo estilo que desktop) */
.tvx-menu-toggle {
  min-width: 35.2px;
  min-height: 35.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: var(--tvx-ent-radius-lg, 8px);
  color: var(--tvx-mobile-text);
  cursor: pointer;
  transition: background-color var(--tvx-ent-timing-base, 200ms) var(--tvx-ent-ease, cubic-bezier(0.4, 0, 0.2, 1));
  -webkit-tap-highlight-color: transparent;
}

.tvx-menu-toggle:hover {
  background: var(--tvx-mobile-surface);
}

.tvx-menu-toggle:active {
  background: var(--tvx-mobile-border);
}

.tvx-menu-toggle:focus-visible {
  outline: 1.6px solid var(--tvx-mobile-focus);
  outline-offset: 1.6px;
}

/* Icono hamburguesa - 19.2px */
.tvx-menu-icon {
  width: 19.2px;
  height: 19.2px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
}

.tvx-menu-icon span {
  width: 100%;
  height: 1.6px;
  background: currentColor;
  border-radius: 1.6px;
  transition: transform 0.2s ease;
}

/* Logo TerraVix - Más grande en mobile */
.tvx-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  margin-right: auto; /* Push right content to the end */
  padding: var(--tvx-ent-space-1, 3.2px) var(--tvx-ent-space-2, 6.4px);
  border-radius: var(--tvx-ent-radius-md, 6.4px);
  transition: background-color var(--tvx-ent-timing-base, 200ms) var(--tvx-ent-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.tvx-logo:hover {
  background-color: var(--tvx-mobile-surface);
}

.tvx-logo img {
  height: 25.6px;  /* Mismo tamaño que desktop */
  width: auto;
  display: block;
}

.tvx-logo:focus-visible {
  outline: 1.6px solid var(--tvx-mobile-focus);
  outline-offset: 1.6px;
  border-radius: var(--tvx-ent-radius-md, 6.4px);
}

/* Chip/Pill "Productor" */
.tvx-pill {
  display: inline-flex;
  align-items: center;
  padding: 3.2px 9.6px;
  border: 1px solid var(--tvx-border);
  border-radius: 799.2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--tvx-accent);
  background: var(--tvx-surface);
  white-space: nowrap;
  line-height: 1.4;
  min-height: 22.4px;
}

/* Avatar circular - Mismo estilo enterprise que desktop */
.tvx-avatar {
  width: 25.6px;
  height: 25.6px;
  min-width: 25.6px;
  min-height: 25.6px;
  border-radius: var(--tvx-ent-radius-md, 6.4px); /* Mismo border-radius que desktop */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #008944 0%, #00753A 100%); /* Mismo gradiente que desktop */
  color: #FFFFFF;
  font-family: var(--tvx-ent-font-family, 'Inter', sans-serif);
  font-weight: var(--tvx-ent-font-weight-semibold, 600);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.tvx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botón de usuario - Target táctil 44x44 */
.tvx-user-btn {
  min-width: 35.2px;
  min-height: 35.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4.8px;
  background: transparent;
  border: none;
  border-radius: var(--tvx-ent-radius-lg, 8px);
  cursor: pointer;
  transition: background-color var(--tvx-ent-timing-base, 200ms) var(--tvx-ent-ease, cubic-bezier(0.4, 0, 0.2, 1));
  -webkit-tap-highlight-color: transparent;
}

.tvx-user-btn:hover {
  background: var(--tvx-mobile-surface);
}

.tvx-user-btn:active {
  background: var(--tvx-mobile-border);
}

.tvx-user-btn:focus-visible {
  outline: 1.6px solid var(--tvx-mobile-focus);
  outline-offset: 1.6px;
}

/* ------------------------------------------------------------------
   FILA 2 - Filtros (Sitio + Campo) con scroll horizontal
   ------------------------------------------------------------------ */
.tvx-filter {
  display: flex;
  align-items: center;
  gap: 9.6px;
  padding: 6.4px 12.8px 9.6px 12.8px;
  overflow-x: hidden; /* Ocultar overflow del contenedor principal */
  background: var(--tvx-mobile-bg);
  border-bottom: 1px solid var(--tvx-mobile-border);
}

.tvx-filter-label {
  font-size: var(--tvx-ent-font-size-sm, 10.4px);
  font-weight: var(--tvx-ent-font-weight-semibold, 600);
  font-family: var(--tvx-ent-font-family, 'Inter', sans-serif);
  color: var(--tvx-mobile-muted);
  white-space: nowrap;
  flex-shrink: 0; /* No permitir que el label se encoja */
  letter-spacing: 0.02em;
}

/* Contenedor scrolleable horizontal para los filtros */
.tvx-filter-scroll {
  display: flex;
  gap: 9.6px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  /* Scroll suave en iOS y Android */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* Ocultar scrollbar en Chrome/Safari */
.tvx-filter-scroll::-webkit-scrollbar {
  display: none;
}

/* Item individual de filtro */
.tvx-filter-item {
  flex-shrink: 0; /* No permitir que se encojan */
  min-width: 128px; /* Ancho mínimo para cada dropdown */
  max-width: 160px; /* Ancho máximo */
}

.tvx-filter-dropdown {
  flex: 1;
  min-width: 0; /* Permite que el dropdown se encoja */
}

/* Ajustes específicos para RadzenDropDown en mobile - Estilo enterprise */
.tvx-filter-dropdown .rz-dropdown,
.tvx-filter-item .rz-dropdown {
  width: 100%;
  min-height: 35.2px;
  border-radius: var(--tvx-ent-radius-lg, 8px);
  border: 1px solid var(--tvx-mobile-border);
  background: var(--tvx-mobile-surface);
  font-size: var(--tvx-ent-font-size-base, 11.2px);
  font-family: var(--tvx-ent-font-family, 'Inter', sans-serif);
  color: var(--tvx-mobile-text);
  transition: all var(--tvx-ent-timing-base, 200ms) var(--tvx-ent-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.tvx-filter-dropdown .rz-dropdown:hover,
.tvx-filter-item .rz-dropdown:hover {
  border-color: var(--tvx-ent-border-medium, #CBD5E1);
  background-color: var(--tvx-mobile-bg);
}

.tvx-filter-dropdown .rz-dropdown:focus,
.tvx-filter-dropdown .rz-dropdown:focus-within,
.tvx-filter-item .rz-dropdown:focus,
.tvx-filter-item .rz-dropdown:focus-within {
  outline: 1.6px solid var(--tvx-mobile-focus);
  outline-offset: 1px;
  border-color: var(--tvx-mobile-accent);
  background-color: var(--tvx-mobile-bg);
  box-shadow: 0 0 0 2.4px var(--tvx-mobile-focus);
}

.tvx-filter-dropdown .rz-dropdown-placeholder,
.tvx-filter-item .rz-dropdown-placeholder {
  color: var(--tvx-mobile-muted);
  font-size: var(--tvx-ent-font-size-base, 11.2px);
}

.tvx-filter-item .rz-dropdown:disabled {
  background: var(--tvx-mobile-surface);
  color: var(--tvx-mobile-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   ACCESIBILIDAD - Focus rings y estados (estilo enterprise)
   ------------------------------------------------------------------ */
:focus-visible {
  outline: 1.6px solid var(--tvx-mobile-focus);
  outline-offset: 1.6px;
}

/* Hover/active SOLO dentro del header mobile.
   ANTES era global (button:hover{...}) y pintaba el fondo claro de CUALQUIER
   botón: un botón rojo con texto blanco quedaba blanco-sobre-gris = invisible.
   Scopeado a .tvx-header-mobile para no romper botones de marca/acción. */
.tvx-header-mobile button:hover,
.tvx-header-mobile a:hover {
  background-color: var(--tvx-mobile-surface);
}

.tvx-header-mobile button:active,
.tvx-header-mobile a:active {
  background-color: var(--tvx-mobile-border);
}

/* ------------------------------------------------------------------
   RESPONSIVE - Ocultar en desktop (>512px)
   ------------------------------------------------------------------ */
@media (min-width: 641px) {
  .tvx-header-mobile {
    display: none;
  }
}

/* ------------------------------------------------------------------
   SOLO MOBILE (≤512px)
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* Ocultar header desktop */
  .tvx-header:not(.tvx-header-mobile) {
    display: none !important;
  }
  
  /* Asegurar que el main no se sobreponga */
  .tvx-main {
    padding-top: 0;
    margin-top: 0;
  }
  
  /* Ajustar sidebar para mobile */
  .tvx-sidebar {
    top: 0;
    padding-top: env(safe-area-inset-top, 0);
  }
}

/* ------------------------------------------------------------------
   UTILIDADES ESPECÍFICAS MOBILE
   ------------------------------------------------------------------ */
.tvx-spacer {
  flex: 1;
}

.tvx-hidden-mobile {
  display: none !important;
}

/* Ocultar header mobile en tablets y desktop (>512px) */
@media (min-width: 641px) {
  .tvx-hidden-desktop {
    display: none !important;
  }
}

/* NOTA: Header mobile solo se muestra en ≤512px
   Header enterprise se muestra en >512px (tablets y desktop) */

/* ------------------------------------------------------------------
   MEJORAS DE RENDIMIENTO MOBILE
   ------------------------------------------------------------------ */
.tvx-header-mobile {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Optimización de animaciones */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}