﻿/*
 * Tokens de marca de MaestrumPro.
 *
 * Extraidos de la aplicacion legacy (wwwroot/assets/css/estilos.css) y renombrados
 * semanticamente: alli los nombres de Bootstrap estaban invertidos (--success era
 * azul marino, --warning burdeos, --danger naranja) y --info tenia un hex invalido
 * (#6a2cal). Aqui cada color tiene el nombre de lo que realmente es.
 */

:root {
  /* --- Paleta de marca --- */
  --mp-navy: #00335b;      /* Sidebar, hover del boton primario, titulos de seccion */
  --mp-blue: #0079c8;      /* Enlaces, estado "Nuevo" */
  --mp-magenta: #c6007e;   /* Boton primario, acentos, franjas */
  --mp-wine: #942151;      /* Cabeceras de tabla, paginacion */
  --mp-teal: #008385;      /* Incidencias, franjas superiores */
  --mp-olive: #678004;     /* Franjas y enlaces de apoyo */
  --mp-orange: #fe5000;    /* Estado "Suspendido" */
  --mp-cyan: #36b9cc;      /* Estado "Completado" */

  /* Variantes derivadas para hover y fondos suaves */
  --mp-navy-claro: #004a83;
  --mp-magenta-oscuro: #9e0064;
  --mp-magenta-suave: #fdf0f8;
  --mp-navy-suave: #eef4f9;

  /* --- Neutros --- */
  --mp-beige: #f1efeb;     /* Fondo del login */
  --mp-canvas: #f8f9fc;    /* Fondo del area de contenido */
  --mp-card: #efeeee;      /* Tarjeta de curso */
  --mp-blanco: #ffffff;
  --mp-texto: #858796;     /* Texto base */
  --mp-texto-fuerte: #2e2f37;
  --mp-gris: #6c6e71;      /* Texto secundario */
  --mp-borde: #e3e6f0;     /* Separadores punteados de fila */
  --mp-borde-suave: #eef0f5;

  /* --- Semanticos --- */
  --mp-exito: #1cc88a;
  /* Paleta de grafico. Son los CUATRO tramos de la barra de cumplimiento, y se
     eligen juntos: lo que importa no es que cada uno guste, sino que ninguna
     pareja se confunda. Validados con `python tools/validar-paleta.py
     "#1cc88a" "#0079c8" "#fe5000" "#c6007e"` -> el peor par se separa 18.0 con
     daltonismo sobre un suelo de 15, y la banda de luminosidad es 28.3 sobre 32.

     El oliva que estaba aqui antes NO valia: es amarillo-verdoso, y contra el
     naranja de "sin cumplir" daba 3.0 con protanopia. Los dos extremos de la
     barra eran el mismo color para quien no distingue el rojo del verde. Es
     tambien lo que impedia usar un ambar para "vence pronto": cualquier amarillo
     se le funde.

     Antes de tocar uno solo de estos cuatro, pasar los cuatro por el validador.
     El color ademas nunca va solo: cada tramo lleva su leyenda y su cifra. */
  --mp-grafico-bien:  #1cc88a;   /* Superadas */
  --mp-grafico-curso: #0079c8;   /* En curso, con plazo de sobra */
  --mp-grafico-aviso: #fe5000;   /* En curso, pero vence en una semana o menos */
  --mp-grafico-mal:   #c6007e;   /* Caducadas y no superadas */
  --mp-aviso: #f6c23e;
  --mp-error: #e74a3b;
  --mp-info: var(--mp-blue);

  /* --- Tipografia --- */
  --mp-fuente: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* --- Geometria --- */
  /* Rasgo caracteristico del legacy: esquinas rectas en botones, tarjetas y modales. */
  --mp-radio: 0;
  --mp-radio-suave: 2px;
  --mp-franja: 14px;       /* Franja superior gruesa que codifica cada seccion por color */

  --mp-sidebar-ancho: 15rem;
  --mp-sidebar-ancho-min: 5.5rem;
  --mp-topbar-alto: 4.375rem;

  --mp-sombra: 0 2px 10px rgba(0, 51, 91, 0.06);
  --mp-sombra-elevada: 0 12px 28px rgba(0, 51, 91, 0.12);

  --mp-transicion: 160ms ease;

  /* --- Marca por empresa ---
     MarcaEmpresa vuelca aqui los colores del cliente; el valor que se ve abajo es
     el de la plataforma. Son tokens de ROL y no de color: el resto de la hoja usa
     --mp-navy para media docena de cosas distintas -titulos, botones secundarios,
     el avatar de la topbar-, asi que reasignarlo para pintar la barra lateral
     tenirira los titulares de toda la aplicacion. Lo que una empresa puede mover es
     lo que aparece AQUI, y nada mas.

     Lo que NO se abre, y es una decision y no una tarea pendiente: los cuatro
     --mp-grafico-* (regla 19: se validan como conjunto, no de uno en uno), los
     semanticos de exito, aviso y error, y los estados de curso. Esos son
     VOCABULARIO: si "completado" fuera verde en una empresa y morado en otra, quien
     da soporte no podria leer una captura de pantalla. */
  --mp-acento: var(--mp-magenta);

  /* Se DERIVA del acento, no se elige: lo calcula ColorDeMarca.Oscurecer al
     emitirlo. El valor de la plataforma es el magenta oscuro que ya existia. */
  --mp-acento-hover: var(--mp-magenta-oscuro);

  --mp-sidebar-fondo: var(--mp-navy);
  --mp-tabla-cabecera: var(--mp-wine);
  --mp-titular: var(--mp-navy);

  /* El marcador del elemento activo del menu sigue al acento en vez de ser magenta
     fijo: sobre una barra lateral con color propio, el magenta podia no verse. */
  --mp-sidebar-activo: var(--mp-acento);
}

/*
 * Se reasignan las variables de Bootstrap 5.3 para no tener que reescribir sus
 * componentes: botones, enlaces, tablas y formularios heredan la marca solos.
 */
:root {
  --bs-primary: #c6007e;
  --bs-primary-rgb: 198, 0, 126;
  --bs-secondary: #00335b;
  --bs-secondary-rgb: 0, 51, 91;
  --bs-info: #0079c8;
  --bs-info-rgb: 0, 121, 200;
  --bs-success: #1cc88a;
  --bs-success-rgb: 28, 200, 138;
  --bs-warning: #f6c23e;
  --bs-warning-rgb: 246, 194, 62;
  --bs-danger: #e74a3b;
  --bs-danger-rgb: 231, 74, 59;

  --bs-body-font-family: var(--mp-fuente);
  --bs-body-color: #858796;
  --bs-body-bg: #f8f9fc;
  --bs-link-color: #0079c8;
  --bs-link-hover-color: #00335b;
  --bs-border-color: #e3e6f0;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
}
