@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/**
 * Ommyway · Tema de marca para la plataforma
 * -------------------------------------------------------------------------
 * Fuente de verdad de color derivada de COLORES.md (landing Ommyway).
 * Se carga DESPUES del CSS de DashForge/Bootstrap para sobrescribir la marca.
 *
 * Regla de uso: consumir SIEMPRE las variables (var(--om-*)), nunca el HEX
 * directo, para que un rediseno futuro sea un unico punto de cambio.
 */

:root {
  /* === Marca === */
  --om-purple:      #7C6FB0; /* Primario: botones, enlaces activos, acentos */
  --om-purple-dark: #5E5191; /* Hover de botones, texto sobre lila */
  --om-purple-soft: #A99BC9; /* Bordes de foco, degradados */
  --om-ink:         #2A2640; /* Texto principal, secciones oscuras */
  --om-ink-deep:    #211D33; /* Fondo mas profundo (footer) */
  --om-green:       #8FAE8B; /* Secundario / estado "bajo" */
  --om-green-dark:  #5C8A57; /* Texto verde, checks, metricas positivas */

  /* === Superficies y lineas === */
  --om-bg:           #F7F6FB; /* Fondo general de pagina */
  --om-surface:      #FFFFFF; /* Tarjetas, cabecera */
  --om-surface-soft: #FBFAFE; /* Tarjetas suaves, dashboard */
  --om-lilac:        #ECE7F6; /* Chips de icono, tags lila */
  --om-lilac-2:      #E3DBF3; /* Bordes, numeros de paso, inputs */
  --om-border:       #F0ECF9; /* Bordes de tarjeta y separadores */
  --om-border-2:     #ECE7F6; /* Bordes secundarios (header, menus) */

  /* === Texto === */
  --om-text:        #2A2640; /* Cuerpo por defecto */
  --om-text-muted:  #6B6880; /* Secundario / descripciones */
  --om-text-subtle: #9A93B0; /* Notas, etiquetas discretas */
  --om-text-faint:  #A0A0B0; /* Fuentes de datos, ejes de graficos */
  --om-nav-link:    #4A4660; /* Enlaces de navegacion */

  /* === Estado / data viz (escala semaforo) === */
  --om-green-state: #8FAE8B; /* Bajo / saludable */
  --om-yellow:      #EFC64F; /* Elevado */
  --om-orange:      #F18519; /* Alto / en riesgo */
  --om-red:         #E5455F; /* Muy alto / critico / error */

  /* === Sombras === */
  --om-shadow-sm:     0 8px 24px rgba(42, 38, 64, .05);
  --om-shadow:        0 10px 30px rgba(42, 38, 64, .06);
  --om-shadow-md:     0 18px 50px rgba(94, 81, 145, .14);
  --om-shadow-lg:     0 24px 60px rgba(124, 111, 176, .32);
  --om-shadow-purple: 0 10px 26px rgba(124, 111, 176, .40);

  /* === Radios y layout === */
  --om-radius-sm:   14px;
  --om-radius:      22px;
  --om-radius-lg:   26px;
  --om-radius-pill: 25px;
  --om-ease: cubic-bezier(.22, .61, .36, 1);

  /* === Overrides de Bootstrap para heredar la marca === */
  --bs-primary:          #7C6FB0;
  --bs-primary-rgb:      124, 111, 176;
  --bs-body-bg:          #F7F6FB;
  --bs-body-color:       #2A2640;
  --bs-body-font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-link-color:       #7C6FB0;
  --bs-link-color-rgb:   124, 111, 176;
  --bs-link-hover-color: #5E5191;
  --bs-border-radius:    var(--om-radius-sm);
}

/* === Base === */
body {
  background-color: var(--om-bg);
  color: var(--om-text);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.tx-rubik {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--om-ink);
}

/* === Utilidades de color de la plataforma === */
.tx-primary,
.text-primary { color: var(--om-purple) !important; }

.bg-primary { background-color: var(--om-purple) !important; }
.bg-primary-transparent { background-color: rgba(124, 111, 176, .12) !important; }

.tx-success,
.text-success { color: var(--om-green-dark) !important; }
.bg-success { background-color: var(--om-green) !important; }

.tx-danger,
.text-danger { color: var(--om-red) !important; }

/* === Enlaces === */
a { color: var(--om-purple); }
a:hover { color: var(--om-purple-dark); }
.content-body a:not(.btn):not(.nav-link) { color: var(--om-purple-dark); }

/* === Botones === */
.btn-primary {
  --bs-btn-bg: var(--om-purple);
  --bs-btn-border-color: var(--om-purple);
  --bs-btn-hover-bg: var(--om-purple-dark);
  --bs-btn-hover-border-color: var(--om-purple-dark);
  --bs-btn-active-bg: var(--om-purple-dark);
  --bs-btn-active-border-color: var(--om-purple-dark);
  --bs-btn-disabled-bg: var(--om-purple-soft);
  --bs-btn-disabled-border-color: var(--om-purple-soft);
  background-color: var(--om-purple) !important;
  border-color: var(--om-purple) !important;
  border-radius: var(--om-radius-pill);
  box-shadow: var(--om-shadow-purple);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--om-purple-dark) !important;
  border-color: var(--om-purple-dark) !important;
}

.btn-outline-primary {
  color: var(--om-purple-dark);
  border-color: #D3C9EC;
  border-radius: var(--om-radius-pill);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--om-purple) !important;
  border-color: var(--om-purple) !important;
  color: #fff;
}

.btn-secondary {
  border-radius: var(--om-radius-pill);
}

.btn-block { border-radius: var(--om-radius-pill); }

/* === Tarjetas === */
.card {
  background-color: var(--om-surface);
  border: 1px solid var(--om-border);
  border-radius: var(--om-radius-sm);
  box-shadow: var(--om-shadow-sm);
}
.card-header { border-bottom-color: var(--om-border); }
.card-hover { transition: transform .25s var(--om-ease), box-shadow .25s var(--om-ease); }
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--om-shadow-md);
  border-color: var(--om-lilac-2);
}

/* === Badges (forma pildora) === */
.badge { border-radius: var(--om-radius-pill); }
.text-bg-primary { background-color: var(--om-purple) !important; color: #fff !important; }
.text-bg-danger  { background-color: var(--om-red) !important; color: #fff !important; }
.text-bg-success { background-color: var(--om-green) !important; color: #fff !important; }
.text-bg-secondary {
  background-color: var(--om-lilac) !important;
  color: var(--om-purple-dark) !important;
}

/* === Tablas === */
.table { --bs-table-hover-bg: var(--om-surface-soft); }
.table thead th {
  color: var(--om-text-subtle);
  border-bottom-color: var(--om-border-2);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .3px;
}
.table td, .table th { border-color: var(--om-border); }

/* === Formularios === */
.form-control,
.form-select {
  border-color: var(--om-lilac-2);
  border-radius: var(--om-radius-sm);
  color: var(--om-text);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--om-purple-soft);
  box-shadow: 0 0 0 .2rem rgba(124, 111, 176, .2);
}
.form-control::placeholder { color: var(--om-text-subtle); }
.border-primary { border-color: var(--om-purple) !important; }

/* === Sidebar (aside DashForge) === */
.aside-logo { color: var(--om-ink) !important; }
.aside-logo span { color: var(--om-purple) !important; }
.nav-aside .nav-link { color: var(--om-nav-link); }
.nav-aside .nav-link:hover,
.nav-aside .nav-link:focus { color: var(--om-purple); }
.nav-aside .nav-item.active .nav-link {
  color: var(--om-purple) !important;
  font-weight: 600;
}
.aside-body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.aside-nav-wrap {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.aside-nav-wrap .nav-aside {
  margin-bottom: 0;
}
.aside-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--om-border-2);
}
.aside-logout-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--om-radius-sm, 8px);
  font-size: 13px;
  font-weight: 500;
  color: var(--om-nav-link);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.aside-logout-link svg {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
}
.aside-logout-link:hover,
.aside-logout-link:focus {
  color: var(--om-purple);
  background-color: var(--om-lilac);
}

/* === Select2 (marca Ommyway) === */
.select2-container--default .select2-selection--single {
  height: 38px;
  border-color: var(--om-lilac-2);
  border-radius: var(--om-radius-sm, 8px);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  color: var(--om-text);
  padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--om-purple-soft);
  box-shadow: 0 0 0 .2rem rgba(124, 111, 176, .2);
}
.select2-dropdown {
  border-color: var(--om-lilac-2);
  border-radius: var(--om-radius-sm, 8px);
  z-index: 1060;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--om-purple);
}

/* === Cabecera de contenido === */
.content-header { border-bottom-color: var(--om-border-2); }

/* === Modales === */
.modal-content { border-radius: var(--om-radius); border-color: var(--om-border); }

/* === Accesibilidad: foco visible === */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
  outline: 2px solid var(--om-purple);
  outline-offset: 2px;
}

/* === Loading global (OmUi) === */
.om-page-loading {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 38, 64, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.om-page-loading.is-visible {
  opacity: 1;
  visibility: visible;
}
.om-page-loading__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 36px;
  background: var(--om-surface);
  border-radius: var(--om-radius);
  box-shadow: 0 12px 40px rgba(42, 38, 64, 0.15);
  min-width: 180px;
}
.om-page-loading__spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--om-lilac);
  border-top-color: var(--om-purple);
  border-radius: 50%;
  animation: om-spin 0.75s linear infinite;
}
.om-page-loading__text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--om-text-muted);
  letter-spacing: 0.02em;
}
@keyframes om-spin {
  to { transform: rotate(360deg); }
}
.om-toast-container .toast {
  min-width: 280px;
  box-shadow: 0 8px 24px rgba(42, 38, 64, 0.12);
}

/* === Auth (login / forgot / reset) === */
.lang-switcher {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 10;
}
.bg-left {
  background: linear-gradient(135deg, var(--om-purple) 0%, #9486C4 60%, var(--om-purple-soft) 100%);
}
.btn-reset {
  background-color: var(--om-purple);
  color: white;
  border: none;
  border-radius: var(--om-radius-pill);
  padding: 10px;
  width: 100%;
  font-weight: 600;
  box-shadow: var(--om-shadow-purple);
}
.btn-reset:hover { background-color: var(--om-purple-dark); color: white; }
.btn-reset:disabled { opacity: .65; }
.password-input { position: relative; }
.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--om-purple);
}
#loginAlert { font-size: 14px; }

/* === Respeta la preferencia de movimiento reducido === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}