/**
 * MensajeDirecto - Brand Colors
 * Paleta de colores corporativa basada en el logo
 * =================================================
 */

:root {
  /* ============================================
     COLORES PRIMARIOS DE MARCA
     ============================================ */

  /* Color principal - Rosa/Magenta del logo */
  --md-primary: #E8457C;
  --md-primary-rgb: 232, 69, 124;
  --md-primary-darker: #C63666;
  --md-primary-dark: #AF2E58;
  --md-primary-light: #ED6894;
  --md-primary-lighter: #F39BB9;
  --md-primary-lightest: #FCE5ED;

  /* Color secundario - Amarillo/Naranja del logo */
  --md-secondary: #F8B42E;
  --md-secondary-rgb: 248, 180, 46;
  --md-secondary-darker: #D99820;
  --md-secondary-dark: #C18818;
  --md-secondary-light: #FAC555;
  --md-secondary-lighter: #FCD788;
  --md-secondary-lightest: #FEF3DC;

  /* Color terciario - Morado oscuro del logo */
  --md-tertiary: #6B3668;
  --md-tertiary-rgb: 107, 54, 104;
  --md-tertiary-darker: #4D2749;
  --md-tertiary-dark: #3E1F3B;
  --md-tertiary-light: #8A5287;
  --md-tertiary-lighter: #B285AF;
  --md-tertiary-lightest: #E8DCE7;

  /* ============================================
     COLORES DE ESTADO (basados en la paleta)
     ============================================ */

  /* Success - Verde derivado del logo */
  --md-success: #28C76F;
  --md-success-rgb: 40, 199, 111;
  --md-success-light: #4FD98B;
  --md-success-lighter: #9EEDC0;
  --md-success-lightest: #E0F9ED;

  /* Warning - Usa el amarillo secundario */
  --md-warning: #F8B42E;
  --md-warning-rgb: 248, 180, 46;
  --md-warning-light: #FAC555;
  --md-warning-lighter: #FCD788;
  --md-warning-lightest: #FEF3DC;

  /* Danger/Error - Rojo derivado del rosa primario */
  --md-danger: #FF4C51;
  --md-danger-rgb: 255, 76, 81;
  --md-danger-light: #FF7276;
  --md-danger-lighter: #FFA8AB;
  --md-danger-lightest: #FFE5E6;

  /* Info - Cyan/Turquesa */
  --md-info: #00BAD1;
  --md-info-rgb: 0, 186, 209;
  --md-info-light: #33CCDD;
  --md-info-lighter: #80E0EA;
  --md-info-lightest: #D6F4F8;

  /* ============================================
     ESCALA DE GRISES
     ============================================ */

  --md-white: #FFFFFF;
  --md-white-rgb: 255, 255, 255;

  --md-gray-50: #FAFAFA;
  --md-gray-100: #F5F5F5;
  --md-gray-200: #EEEEEE;
  --md-gray-300: #E0E0E0;
  --md-gray-400: #BDBDBD;
  --md-gray-500: #9E9E9E;
  --md-gray-600: #757575;
  --md-gray-700: #616161;
  --md-gray-800: #424242;
  --md-gray-900: #212121;

  --md-black: #000000;
  --md-black-rgb: 0, 0, 0;

  /* ============================================
     COLORES DE FONDO
     ============================================ */

  --md-bg-primary: #FFFFFF;
  --md-bg-secondary: #F8F7FA;
  --md-bg-tertiary: #F5F5F5;
  --md-bg-card: #FFFFFF;
  --md-bg-hover: #F9F9F9;
  --md-bg-active: #F5F5F5;
  --md-bg-disabled: #EEEEEE;

  /* ============================================
     COLORES DE TEXTO
     ============================================ */

  --md-text-primary: #2F2B3D;
  --md-text-secondary: #6D6B77;
  --md-text-tertiary: #9E9E9E;
  --md-text-disabled: #BDBDBD;
  --md-text-on-primary: #FFFFFF;
  --md-text-on-secondary: #2F2B3D;
  --md-text-on-dark: #FFFFFF;

  /* ============================================
     COLORES DE BORDE
     ============================================ */

  --md-border-light: #F5F5F5;
  --md-border-medium: #E0E0E0;
  --md-border-dark: #BDBDBD;
  --md-border-primary: var(--md-primary);
  --md-border-focus: var(--md-primary-light);

  /* ============================================
     SOMBRAS
     ============================================ */

  --md-shadow-xs: 0 1px 2px 0 rgba(47, 43, 61, 0.05);
  --md-shadow-sm: 0 2px 4px 0 rgba(47, 43, 61, 0.08);
  --md-shadow-md: 0 4px 8px 0 rgba(47, 43, 61, 0.12);
  --md-shadow-lg: 0 8px 16px 0 rgba(47, 43, 61, 0.16);
  --md-shadow-xl: 0 12px 24px 0 rgba(47, 43, 61, 0.20);
  --md-shadow-2xl: 0 16px 32px 0 rgba(47, 43, 61, 0.24);

  /* ============================================
     SOBRESCRITURA DE BOOTSTRAP
     ============================================ */

  /* Colores principales de Bootstrap */
  --bs-primary: var(--md-primary);
  --bs-primary-rgb: var(--md-primary-rgb);
  --bs-secondary: var(--md-secondary);
  --bs-secondary-rgb: var(--md-secondary-rgb);
  --bs-success: var(--md-success);
  --bs-success-rgb: var(--md-success-rgb);
  --bs-info: var(--md-info);
  --bs-info-rgb: var(--md-info-rgb);
  --bs-warning: var(--md-warning);
  --bs-warning-rgb: var(--md-warning-rgb);
  --bs-danger: var(--md-danger);
  --bs-danger-rgb: var(--md-danger-rgb);

  /* Colores de énfasis de texto */
  --bs-primary-text-emphasis: var(--md-primary-dark);
  --bs-secondary-text-emphasis: var(--md-secondary-dark);
  --bs-success-text-emphasis: #106534;
  --bs-info-text-emphasis: #00616F;
  --bs-warning-text-emphasis: #8A5C19;
  --bs-danger-text-emphasis: #B82528;

  /* Fondos sutiles */
  --bs-primary-bg-subtle: var(--md-primary-lightest);
  --bs-secondary-bg-subtle: var(--md-secondary-lightest);
  --bs-success-bg-subtle: var(--md-success-lightest);
  --bs-info-bg-subtle: var(--md-info-lightest);
  --bs-warning-bg-subtle: var(--md-warning-lightest);
  --bs-danger-bg-subtle: var(--md-danger-lightest);

  /* Bordes sutiles */
  --bs-primary-border-subtle: var(--md-primary-lighter);
  --bs-secondary-border-subtle: var(--md-secondary-lighter);
  --bs-success-border-subtle: var(--md-success-lighter);
  --bs-info-border-subtle: var(--md-info-lighter);
  --bs-warning-border-subtle: var(--md-warning-lighter);
  --bs-danger-border-subtle: var(--md-danger-lighter);

  /* Colores de fondo del body */
  --bs-body-bg: var(--md-bg-secondary);
  --bs-body-color: var(--md-text-secondary);

  /* Enlaces */
  --bs-link-color: var(--md-primary);
  --bs-link-hover-color: var(--md-primary-dark);

  /* Bordes */
  --bs-border-color: var(--md-border-medium);
}

/* ============================================
   TEMA OSCURO (Dark Mode)
   ============================================ */

[data-bs-theme="dark"] {
  /* Colores principales mantienen su intensidad en dark mode */
  --md-primary: #ED6894;
  --md-primary-rgb: 237, 104, 148;
  --md-secondary: #FAC555;
  --md-secondary-rgb: 250, 197, 85;
  --md-tertiary: #8A5287;
  --md-tertiary-rgb: 138, 82, 135;

  /* Fondos oscuros */
  --md-bg-primary: #1A1625;
  --md-bg-secondary: #232030;
  --md-bg-tertiary: #2D2838;
  --md-bg-card: #232030;
  --md-bg-hover: #2D2838;
  --md-bg-active: #363244;
  --md-bg-disabled: #2D2838;

  /* Textos en dark mode */
  --md-text-primary: #E8E6EB;
  --md-text-secondary: #B8B6C0;
  --md-text-tertiary: #8F8D98;
  --md-text-disabled: #5D5B66;

  /* Bordes en dark mode */
  --md-border-light: #2D2838;
  --md-border-medium: #363244;
  --md-border-dark: #454352;

  /* Sobrescritura Bootstrap dark mode */
  --bs-body-bg: var(--md-bg-secondary);
  --bs-body-color: var(--md-text-primary);
  --bs-border-color: var(--md-border-medium);
  --bs-emphasis-color: var(--md-text-primary);
  --bs-secondary-color: var(--md-text-secondary);
  --bs-tertiary-color: var(--md-text-tertiary);
}

/* ============================================
   UTILIDADES DE COLOR
   ============================================ */

/* Clases de fondo */
.bg-brand-primary { background-color: var(--md-primary) !important; }
.bg-brand-secondary { background-color: var(--md-secondary) !important; }
.bg-brand-tertiary { background-color: var(--md-tertiary) !important; }

/* Clases de texto */
.text-brand-primary { color: var(--md-primary) !important; }
.text-brand-secondary { color: var(--md-secondary) !important; }
.text-brand-tertiary { color: var(--md-tertiary) !important; }

/* Clases de borde */
.border-brand-primary { border-color: var(--md-primary) !important; }
.border-brand-secondary { border-color: var(--md-secondary) !important; }
.border-brand-tertiary { border-color: var(--md-tertiary) !important; }

/* Botones con gradiente de marca */
.btn-brand-gradient {
  background: linear-gradient(135deg, var(--md-primary) 0%, var(--md-tertiary) 100%);
  border: none;
  color: white;
}

.btn-brand-gradient:hover {
  background: linear-gradient(135deg, var(--md-primary-dark) 0%, var(--md-tertiary-dark) 100%);
  color: white;
}

/* Badge con colores de marca */
.badge-brand-primary {
  background-color: var(--md-primary-lightest);
  color: var(--md-primary-dark);
}

.badge-brand-secondary {
  background-color: var(--md-secondary-lightest);
  color: var(--md-secondary-dark);
}

/* Enlaces con colores de marca */
.link-brand-primary {
  color: var(--md-primary);
  text-decoration: none;
}

.link-brand-primary:hover {
  color: var(--md-primary-dark);
  text-decoration: underline;
}

/* ============================================
   STEPPER - Iconos visibles en paso activo
   ============================================ */

/* Hacer que los iconos sean blancos en el paso activo para que se vean sobre el fondo rosa */
.bs-stepper.wizard-icons .bs-stepper-header .step.active .step-trigger .bs-stepper-icon i {
  color: #ffffff !important;
}

/* También aplicar a los iconos SVG si se usan */
.bs-stepper.wizard-icons .bs-stepper-header .step.active .step-trigger .bs-stepper-icon svg {
  fill: #ffffff !important;
}

/* Asegurar que el wrapper del icono también sea visible */
.bs-stepper.wizard-icons .bs-stepper-header .step.active .step-trigger .bs-stepper-icon .icon-base {
  color: #ffffff !important;
}