/* ════════════════════════════════════════════════════════════════════════════
   METIS OS — SISTEMA DE DISEÑO CENTRALIZADO
   Archivo: theme.css
   Propósito: Variables de marca, tipografía y estado — fuente única de verdad
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── IDENTIDAD DE MARCA ─────────────────────────────────────────────────── */
  --metis-indigo: #3D3AB0;           /* Color primario — acciones y estados activos */
  --metis-indigo-hover: #2A2880;     /* Hover del indigo */
  --metis-indigo-claro: #EEEEFF;     /* Fondo claro con indigo */
  --metis-oro: #D4B86A;              /* Acentos de maestría y PCC markers */
  --metis-ambar: #E8B856;            /* Línea decorativa de 3px — identidad visual */

  /* ─── SUPERFICIE Y NEUTRALS ──────────────────────────────────────────────── */
  --metis-travertino: #FAF8F3;       /* Fondo base — papel de arroz */
  --metis-travertino-oscuro: #EAE6DF; /* Variación oscura controlada */
  --metis-noche: #13122A;            /* Sidebar — contraste de autoridad */
  --metis-pizarra: #8888AA;          /* Textos secundarios y deshabilitados */
  --metis-borde: #E0DAD0;            /* Unificado: bordes de cards y separadores */

  /* ─── COLORES SEMÁNTICOS DE ESTADO ──────────────────────────────────────── */
  --metis-error: #E8344A;            /* Error y alertas críticas */
  --metis-cian-tecnico: #2A8E81;     /* Success — precisión técnica */

  /* ─── COLORES PEDAGÓGICOS (Función específica en tutorías) ────────────────── */
  --metis-purpura: #6650C8;          /* Marca pedagógica específica — preservado */
  --metis-esmeralda: #1AAF82;        /* Marca pedagógica específica — preservado */

  /* ─── TIPOGRAFÍA ─────────────────────────────────────────────────────────── */
  /* duplicadas — usar global.css: --font-ui, --font-marca, --font-display */
  /* --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; */
  /* --font-accent: 'Syne', sans-serif; */
  /* --font-serif: 'Fraunces', Georgia, serif; */

  /* ─── ESCALA TIPOGRÁFICA (Golden Scale) ──────────────────────────────────── */
  --fs-h1: 2rem;          /* Nombre del programa / Logo principal */
  --fs-h2: 1.75rem;       /* Títulos secundarios */
  --fs-eyebrow: 11px;     /* Etiquetas, labels (Syne 700) */
  --fs-body: 14px;        /* Párrafos y descripciones (Inter Regular) */
  --fs-cta: 12px;         /* Botones y llamadas a acción (Syne 700, CAPS) */
  --fs-small: 10px;       /* Texto muy pequeño, hints */

  /* ─── PESOS TIPOGRÁFICOS ESTÁNDAR ────────────────────────────────────────── */
  --fw-light: 300;        /* Fraunces para headers elegantes */
  --fw-regular: 400;      /* Inter para body */
  --fw-medium: 500;       /* Syne para navegación */
  --fw-bold: 700;         /* Syne para botones y énfasis */
}

/* ════════════════════════════════════════════════════════════════════════════
   ESTILOS BASE GLOBALES
   ════════════════════════════════════════════════════════════════════════════ */

body {
  background-color: var(--metis-travertino);
  color: var(--metis-noche);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.6;
}

/* ─── TIPOGRAFÍA DE ENCABEZADOS ──────────────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-h1);
  color: var(--metis-noche);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  color: var(--metis-noche);
}

/* ─── EYEBROW / LABEL (Syne 700, UPPERCASE) ──────────────────────────────── */

.eyebrow, .label {
  font-family: var(--font-accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--metis-oro);
}

/* ─── BOTONES Y LLAMADAS A ACCIÓN (Syne 700, 12px, CAPS) ──────────────────── */

button, .button, .cta {
  font-family: var(--font-accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-cta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--metis-indigo);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover, .button:hover, .cta:hover {
  background-color: var(--metis-indigo-hover);
}

/* ─── INPUTS Y TEXTAREA ────────────────────────────────────────────────────── */

input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background-color: white;
  border: 1px solid var(--metis-borde);
  color: var(--metis-noche);
  padding: 10px 12px;
  border-radius: 4px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--metis-indigo);
  box-shadow: 0 0 0 3px var(--metis-indigo-claro);
}

/* ═════════════════════════════════════════════════════════════════════════════
   UTILIDADES DE COLOR Y ESTADO
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── ALERTAS Y ESTADOS ────────────────────────────────────────────────────── */

.text-error {
  color: var(--metis-error);
}

.bg-error {
  background-color: var(--metis-error);
  color: white;
}

.text-success {
  color: var(--metis-cian-tecnico);
}

.bg-success {
  background-color: var(--metis-cian-tecnico);
  color: white;
}

/* ─── COLORES PEDAGÓGICOS (Funciones específicas en tutorías) ──────────────── */

.text-purpura {
  color: var(--metis-purpura);
}

.bg-purpura {
  background-color: var(--metis-purpura);
  color: white;
}

.text-esmeralda {
  color: var(--metis-esmeralda);
}

.bg-esmeralda {
  background-color: var(--metis-esmeralda);
  color: white;
}

/* ─── SEPARADORES Y BORDES ─────────────────────────────────────────────────── */

hr, .separator {
  border: none;
  border-top: 3px solid var(--metis-ambar);
  margin: 2rem 0;
}

.card {
  background-color: white;
  border: 1px solid var(--metis-borde);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ─── SIDEBAR / COMPONENTES OSCUROS ────────────────────────────────────────── */

.sidebar, .dark-bg {
  background-color: var(--metis-noche);
  color: white;
}

.sidebar a, .dark-bg a {
  color: var(--metis-oro);
}

.sidebar a:hover, .dark-bg a:hover {
  color: var(--metis-ambar);
}

/* ═════════════════════════════════════════════════════════════════════════════
   MARCAS DE MAESTRÍA Y PCC (Oro para acentos especiales)
   ═════════════════════════════════════════════════════════════════════════════ */

.pcc-marker, .mastery-badge {
  color: var(--metis-oro);
  font-weight: var(--fw-bold);
}

.pcc-border {
  border-left: 4px solid var(--metis-oro);
  padding-left: 1rem;
}

/* ═════════════════════════════════════════════════════════════════════════════
   FIN DE theme.css
   ════════════════════════════════════════════════════════════════════════════ */