/*  Observatorio Duchenne, reconstruccion local.
 *
 *  Mismo sistema visual que el Explorador RAE-CMBD (pestadistico): los colores,
 *  la banda de indicadores y las notas tipograficas se copian de su estilos.css
 *  para que las dos aplicaciones se lean como de la misma casa. Si alli cambia
 *  la tabla de color, aqui tambien.
 */
:root {
  --w-azul-profundo: #0b3c5d;
  --w-azul: #0b6fa4;
  --w-gris-azul: #5b7c93;
  --w-texto: #16232c;
  --w-texto-tenue: #8ba0b0;
  --w-borde: #dbe3ea;
  --w-lienzo: #f2f5f7;
}

body { background: var(--w-lienzo); color: var(--w-texto); }

/*  Cabecera: fondo blanco y filete inferior, como en el explorador. La marca no
 *  compite con el dato. */
.w-cabecera {
  background: #fff; border-bottom: 1px solid var(--w-borde);
  padding: 14px 22px; display: flex; align-items: center; gap: 16px;
}
.w-cabecera .w-logo { height: 68px; width: auto; }
/*  Titulo y subtitulo apilados, y el bloque centrado verticalmente respecto al
 *  logo: asi la marca y el nombre comparten eje en vez de quedar el subtitulo
 *  colgando a la derecha. */
.w-cabecera .w-titulos { display: flex; flex-direction: column; justify-content: center; }
.w-cabecera .titulo { font-size: 21px; font-weight: 600; color: var(--w-azul-profundo);
                      line-height: 1.2; }
.w-cabecera .sub { font-size: 13px; color: var(--w-gris-azul); margin-top: 3px; }

/*  Banda de indicadores. */
.w-banda { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
           padding: 16px 22px 4px; }
.w-ind { background: #fff; border: 1px solid var(--w-borde); border-radius: 6px;
         padding: 14px 16px; }
.w-ind .rotulo { font-size: 12px; color: var(--w-gris-azul); font-weight: 500; }
.w-ind .valor  { font-size: 30px; font-weight: 700; color: var(--w-azul-profundo);
                 line-height: 1.15; margin: 2px 0 4px; }
.w-ind .pie    { font-size: 11px; color: var(--w-texto-tenue); line-height: 1.4; }

/*  Notas: tipograficas, sin fondo de color. Lo que distingue una advertencia de
 *  una precision metodologica es el rotulo, no un semaforo. */
.w-nota { padding: 10px 14px 2px; }
.w-nota .rotulo { font-size: 12px; font-weight: 600; color: var(--w-azul-profundo); }
.w-nota .cuerpo { font-size: 12px; line-height: 1.55; color: #5b7080; }

.card { border: 1px solid var(--w-borde) !important; border-radius: 6px !important; }
.card-header { background: #fff !important; border-bottom: 1px solid #eef2f5 !important;
               font-weight: 600; color: var(--w-azul-profundo); }

/*  Sello de procedencia, en monoespaciada como el sello de definicion de caso. */
.w-sello { font-family: 'IBM Plex Mono', ui-monospace, monospace;
           font-size: 11px; color: var(--w-texto-tenue); }

.nav-pills .nav-link.active { background-color: var(--w-azul-profundo); }
.nav-pills .nav-link { color: var(--w-azul-profundo); }