/* ==========================================================================
   ORIENTALFS_TEAMS — DESIGN SYSTEM & TOKENS GLOBALES
   Identidad Corporativa Unificada: Índigo Pedagógico & Slate Neutro
   ========================================================================== */

:root {
  /* Marca e Identidad */
  --primary-50:  #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;

  /* Neutros Slate */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Superficies y Fondos */
  --bg-app:     #f8fafc;
  --surface:    #ffffff;
  --surface-alt:#f1f5f9;
  --border-color: #e2e8f0;
  --border-focus: #4f46e5;

  /* Textos */
  --text-main:    #0f172a;
  --text-muted:   #64748b;
  --text-subtle:  #94a3b8;
  --text-inverse: #ffffff;

  /* Estados Institucionales */
  --onedrive-blue: #0078d4;
  --onedrive-bg:   #eff6fc;
  --success:       #10b981;
  --success-bg:    #ecfdf5;
  --warning:       #f59e0b;
  --warning-bg:    #fffbeb;
  --danger:        #ef4444;
  --danger-bg:     #fef2f2;

  /* Código de Colores Oficial NEAE */
  --neae-acnee-bg:   #f5f3ff;
  --neae-acnee-text: #7c3aed;
  --neae-acnee-border:#ddd6fe;

  --neae-dea-bg:     #fffbeb;
  --neae-dea-text:   #d97706;
  --neae-dea-border: #fde68a;

  --neae-tdah-bg:    #fefce8;
  --neae-tdah-text:  #ca8a04;
  --neae-tdah-border:#fef08a;

  --neae-alca-bg:    #eff6ff;
  --neae-alca-text:  #2563eb;
  --neae-alca-border:#bfdbfe;

  --neae-comp-bg:    #ecfdf5;
  --neae-comp-text:  #059669;
  --neae-comp-border:#a7f3d0;

  --neae-dil-bg:     #ecfeff;
  --neae-dil-text:   #0891b2;
  --neae-dil-border: #a5f3fc;

  /* Tipografía */
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Consolas', 'Courier New', monospace;

  /* Geometría y Sombras */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.25);

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset Global */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--slate-400);
}

/* Layout General SPA */
.app-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.main-viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-app);
}

/* Botones Primarios y Secundarios */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--primary-600);
  color: var(--text-inverse);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
  background-color: var(--primary-700);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background-color: var(--surface);
  color: var(--slate-700);
  border-color: var(--slate-300);
}
.btn-secondary:hover {
  background-color: var(--slate-100);
  border-color: var(--slate-400);
}

.btn-ghost {
  background: transparent;
  color: var(--slate-600);
}
.btn-ghost:hover {
  background-color: var(--slate-100);
  color: var(--slate-900);
}

.btn-danger {
  background-color: var(--danger);
  color: var(--text-inverse);
}
.btn-danger:hover {
  background-color: #dc2626;
}

/* Badges e Insignias */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.badge-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* Clases de utilidad */
.hidden { display: none !important; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown styling */
.dropdown-item:hover {
  background-color: var(--slate-50) !important;
  color: var(--primary-600) !important;
}