// Write your overrides

:root {
  --color-primary: #E20074;
  --color-primary-dark: #D8005A;
  --color-secondary: #7A0099;
  --color-secondary-dark: #5C007A;
  --color-dark: #121426;
  --color-dark-light: #1E2243;
  --color-light: #F8F9FA;
  --color-light-gray: #E9ECEF;
  --color-white: #FFFFFF;
  --brand-gradient: linear-gradient(135deg, #7A0099, #E20074) !important;

  // Variables del degradado de branding (usadas por .header-gradient en todos los modales)
  // El JS del branding store las sobreescribe con los colores configurados en ajustes generales
  --v-theme-gradient-start: 122, 0, 153;   // #7A0099 en formato RGB
  --v-theme-gradient-end:   226, 0, 116;   // #E20074 en formato RGB
}

// Forzar color magenta fucsia de TOVA en todos los enlaces y textos primarios
.text-primary,
a.text-primary,
.v-application a.text-primary,
.v-application .text-primary {
  color: #E20074 !important;
}


.tova-gradient {
  background: var(--brand-gradient) !important;
  color: var(--color-white) !important;
}

.v-btn.v-btn--variant-elevated.v-btn--color-primary,
.v-btn.v-btn--variant-flat.v-btn--color-primary {
  background: var(--brand-gradient) !important;
  color: var(--color-white) !important;
  border: none !important;
  transition: all 0.3s ease;
  
  &:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 15px rgba(226, 0, 116, 0.4) !important;
  }
}

.layout-vertical-nav,
.v-navigation-drawer {
  // Íconos inactivos con el color morado oscuro de TOVA (#6E0865)
  .v-list-item:not(.v-list-item--active),
  .nav-link:not(.active),
  .nav-group:not(.active),
  .nav-group:not(.open) {
    .v-icon,
    .nav-item-icon,
    svg,
    svg path {
      color: #6E0865 !important;
      fill: #6E0865 !important;
      opacity: 0.95 !important;
      transition: all 0.25s ease;
    }

    &:hover,
    > a:hover,
    > div:hover {
      .v-icon,
      .nav-item-icon,
      svg,
      svg path {
        color: #E20074 !important; // Hover en fucsia explícito de TOVA
        fill: #E20074 !important;
        opacity: 1 !important;
        transform: scale(1.08) !important; // Micro-animación de escala elegante
      }
    }
  }

  // Asegurar que los items activos destaquen con el gradiente e iconos en blanco puro
  .v-list-item--active,
  .nav-link.active,
  .nav-link .router-link-active,
  .nav-link .router-link-exact-active {
    background: #E20074 !important;
    color: var(--color-white) !important;
    
    .v-list-item-title,
    .v-list-item-subtitle,
    .v-list-item__prepend,
    .v-list-item__append,
    .nav-link-title,
    span,
    div,
    p {
      color: var(--color-white) !important;
      opacity: 1 !important;
    }
    
    .v-icon,
    .nav-item-icon,
    svg,
    svg path {
      color: var(--color-white) !important;
      fill: var(--color-white) !important;
      opacity: 1 !important;
    }
  }

  // Estilos adicionales para submenús activos o con foco para asegurar contraste
  .v-list-group__items {
    .v-list-item--active,
    .v-list-item:hover {
      background: rgba(226, 0, 116, 0.15) !important;
      
      .v-list-item-title,
      .v-list-item-subtitle,
      span,
      div {
        color: #E20074 !important; // Texto fucsia para el sub-item activo
        font-weight: 700 !important;
      }
      
      .v-icon,
      svg,
      svg path {
        color: #E20074 !important;
        fill: #E20074 !important;
      }
    }

    // Si el sub-item es el activo exacto (router-link-exact-active), usar gradiente
    .v-list-item--active.router-link-exact-active,
    .v-list-item--active.router-link-active {
      background: #E20074 !important;
      
      .v-list-item-title,
      .v-list-item-subtitle,
      span,
      div {
        color: var(--color-white) !important;
        font-weight: 700 !important;
      }
      
      .v-icon,
      svg,
      svg path {
        color: var(--color-white) !important;
        fill: var(--color-white) !important;
      }
    }
  }
}

/*
  Global override to adjust the "oval" appearance of internal cards in modals.
  As requested by the user, we change rounded-xl to 8px inside dialogs
  to achieve a cleaner, more modern look.
*/
.v-dialog {
  // Target cards and any element with rounded-xl utility class inside a dialog
  .v-card.rounded-xl,
  .v-card.detail-dialog-card,
  .rounded-xl {
    border-radius: 8px !important;
  }

  // Ensure nested elements like avatars or indicators that use rounded-xl also adjust
  .v-avatar.rounded-xl,
  .header-indicator {
    border-radius: 8px !important;
  }

  /*
    DARK MODE ADAPTATION:
    Force background-color to use the theme's surface color even if bg-white is explicitly used.
    This fixes the issue where modals appear white in dark mode.
  */
  .bg-white,
  .v-card.bg-white,
  .v-card-actions.bg-white {
    background-color: rgb(var(--v-theme-surface)) !important;
  }

  // Define a theme-aware bg-light for layered designs
  .bg-light {
    background-color: rgba(var(--v-border-color), 0.05) !important;
  }

  // Ensure borders are subtle and adapt to the active theme
  .border,
  .border-t,
  .border-b,
  .border-dashed {
    border-color: rgba(var(--v-border-color), 0.1) !important;
  }
}

/*
  PREMIUM VISUAL WEIGHT AND DARK CONTRAST SYSTEM FOR TOVA
  Forzamos contrastes oscuros del color corporativo en textos principales,
  secundarios, títulos y campos de formulario para evitar la pérdida de peso visual.
*/
body, 
.v-application {
  font-size: 13px !important;
  color: var(--color-dark) !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

// Títulos y encabezados con fuerte contraste, peso suavizado y escala compacta
h1, .text-h1 { font-size: 1.65rem !important; font-weight: 600 !important; color: var(--color-dark) !important; }
h2, .text-h2 { font-size: 1.4rem !important; font-weight: 600 !important; color: var(--color-dark) !important; }
h3, .text-h3 { font-size: 1.2rem !important; font-weight: 500 !important; color: var(--color-dark) !important; }
h4, .text-h4 { font-size: 1.05rem !important; font-weight: 500 !important; color: var(--color-dark) !important; }
h5, .text-h5 { font-size: 0.95rem !important; font-weight: 500 !important; color: var(--color-dark) !important; }
h6, .text-h6, 
.v-card-title:not(:has(.header-gradient)) { 
  font-size: 0.85rem !important; 
  font-weight: 500 !important; 
  color: var(--color-dark) !important; 
}

// Regla global para TODOS los headers de modales del sistema
// Usa --brand-gradient que el branding store actualiza al cargar la configuración del negocio
.header-gradient {
  background: var(--brand-gradient) !important;
}

// Los headers de modales con gradiente SIEMPRE muestran texto blanco
.header-gradient,
.header-gradient * {
  color: white !important;
}

// Párrafos, textos descriptivos y de énfasis medio (marino profundo de alta legibilidad)
p, 
span.text-medium-emphasis,
.text-body-1, 
.text-body-2, 
.v-list-item-title,
.text-medium-emphasis {
  font-size: 13px !important;
  color: #2b2e4a !important; // Marino intermedio con excelente contraste sobre fondos claros
  opacity: 0.95 !important;
  font-weight: 400 !important;
}

.text-caption,
.v-list-item-subtitle,
.v-list-item-subtitle * {
  font-size: 11px !important;
  font-weight: 400 !important;
}

// Elementos de formulario
.v-label, 
.v-field-label {
  color: var(--color-dark) !important;
  font-weight: 500;
  opacity: 0.9 !important;
}

.v-field__input {
  color: var(--color-dark) !important;
  font-weight: 400;
}

.v-field__placeholder {
  opacity: 0.6 !important;
}

/* Forzar botones redondos para todos los filtros del sistema */
.app-filter-base .v-btn,
[class*="filter"] .v-btn,
[id*="filter"] .v-btn,
.filters-container .v-btn,
.filter-container .v-btn,
.filter-box .v-btn,
.filter-row .v-btn,
.filter-panel .v-btn,
.filter-actions .v-btn {
  border-radius: 9999px !important;
  
  &.rounded-lg,
  &.rounded-md,
  &.rounded-sm,
  &.rounded-xl {
    border-radius: 9999px !important;
  }
}

/* Límite estricto de border-radius a 5px en todo el ERP (excepto botones circulares explícitos) */
.v-card,
.v-btn:not(.app-filter-base .v-btn):not([class*="filter"] .v-btn):not(.rounded-circle):not(.v-btn--icon),
.v-chip,
.v-avatar:not(.rounded-circle),
.v-field,
.v-input__control,
.v-list-item,
.v-menu .v-list,
.v-overlay__content,
.kpi-card {
  border-radius: 5px !important;
}

/* Contraste y color en tarjetas primarias del dashboard */
.bg-primary-gradient,
.bg-primary-gradient * {
  color: #ffffff !important;
}