/* ============================================================
   MUESTRA HELSEK — repintado del panel con la marca Helsek
   ------------------------------------------------------------
   Se carga DESPUÉS de panel.css (la copia del CSS real del
   sistema) y no toca ni una regla de estructura: sólo redefine
   los tokens de color y los pocos colores que en el original
   quedaron escritos a mano dentro del sidebar.

   Por qué alcanza con esto: el CSS del sistema tiene todo el
   color en un :root de 40 variables. Cambiando el :root y el
   logo, cambia el panel entero. Así la muestra es la pantalla
   de verdad —misma retícula, mismas tablas, mismos
   componentes— vestida de Helsek.

   ⚠️ Los contrastes de acá están MEDIDOS, no elegidos a ojo
   (_contraste.js en la carpeta de trabajo). Tres notas:

   · --tinta-3 pasó de #9AA1B2 a #63728A. En el sistema real
     ese gris da 2,59:1 sobre blanco, bastante abajo del 4,5
     que pide AA para texto normal, y se usa justamente en los
     textos de ayuda de los formularios. No se hereda un
     contraste bajo en una pieza de venta.
   · Los tres grises quedaron en 14,6 / 6,5 / 4,7 sobre papel,
     o sea con la jerarquía intacta y los tres sobre AA.
   · El ámbar y el rojo se oscurecieron sólo lo necesario para
     que pasen cuando se usan como TEXTO sobre su fondo suave.
   ============================================================ */

:root{
  /* --- el azul noche del sidebar pasa a ser la tinta de Helsek --- */
  --noche:#12263F;
  --noche-2:#1D3454;
  --noche-3:#0C1A2D;

  /* --- el indigo del sistema pasa a ser el azul de la marca --- */
  --indigo:#1B4B8F;
  --indigo-osc:#17407B;
  --luna:#A8CBFA;          /* el celeste del isotipo: foco y acentos */

  --fondo:#FBFAF8;         /* el papel cálido de la landing, no #F5F6FA */
  --blanco:#FFFFFF;

  /* --- grises medidos, ver la nota de arriba --- */
  --tinta:#12263F;
  --tinta-2:#4E5C74;
  --tinta-3:#63728A;
  --linea:#DFE4EC;

  /* --- semánticos --- */
  --menta:#2E7D5B;         /* el verde de Helsek */
  --menta-suave:#E3F1EA;
  --menta-texto:#236047;   /* cuando el verde es TEXTO sobre menta-suave */
  --ambar:#B07A14;
  --ambar-suave:#FBF2DF;
  --ambar-texto:#8A5F10;
  --rojo:#B03039;
  --rojo-suave:#FBE9EA;
  --rojo-texto:#A32B36;
  --azul-suave:#EAF1FA;

  /* --- paleta de gráficos, rearmada alrededor del azul Helsek --- */
  --grafico-1:#1B4B8F;
  --grafico-2:#2E7D5B;
  --grafico-3:#3C7DD9;
  --grafico-4:#B07A14;
  --grafico-5:#B03039;
  --grafico-6:#12263F;
  --grafico-7:#5FA98F;
  --grafico-8:#7C5FA8;
  --grafico-9:#4E5C74;
  --grafico-10:#C98A90;

  --grilla:#EEF1F6;

  /* Las sombras del sistema tiñen con su azul noche; acá tiñen
     con la tinta de Helsek, que es la misma cuenta de la landing. */
  --sombra:0 1px 2px rgba(18,38,63,.06), 0 8px 24px rgba(18,38,63,.07);
  --sombra-flotante:0 12px 40px rgba(18,38,63,.22);
}

/* ------------------------------------------------------------
   SIDEBAR — los colores que en el original están a mano
   ------------------------------------------------------------
   El gradiente del sistema mezcla dos violáceos (la luna y el
   indigo). Sobre la tinta de Helsek esos violetas se ven
   sucios, así que el resplandor se rearma con el celeste y el
   azul de la marca. Los textos del menú eran azul-violáceos
   (#C7CEE6 / #97A2CC / #7683B3): pasan a la familia azul-gris
   de Helsek, todos medidos contra #12263F.
   ------------------------------------------------------------ */
.sidebar{
  background:
    radial-gradient(420px 260px at 85% -6%, rgba(168,203,250,.20), transparent 70%),
    radial-gradient(360px 240px at -12% 26%, rgba(27,75,143,.34), transparent 72%),
    linear-gradient(178deg, var(--noche-3) 0%, var(--noche) 42%, var(--noche-2) 100%);
  color:#C9D6E8;                        /* 10,38:1 */
}
.marca span{color:#9FB4CE}              /* 7,20:1 */
.nav-panel a{color:#C9D6E8}             /* 10,38:1 */
.nav-panel .seccion{color:#7C90AC}      /* 4,69:1 — título de sección, texto grande */
.sidebar .pie{color:#8FA3BE}            /* 5,93:1 (era #7683B3) */

/* El logo del consultorio de la muestra es un SVG cuadrado: el
   original recorta un PNG con object-fit y acá no hace falta. */
.marca .logo-muestra{
  width:42px;height:42px;flex-shrink:0;border-radius:10px;display:block;
}

/* ------------------------------------------------------------
   PILLS DE ESTADO
   ------------------------------------------------------------
   Son lo que más se mira en la agenda, así que van con los
   textos oscurecidos a AA sobre su propio fondo.
   ------------------------------------------------------------ */
.pill-indigo{background:var(--azul-suave);color:var(--indigo)}        /* 7,54:1 */
.pill-menta{background:var(--menta-suave);color:var(--menta-texto)}   /* 6,31:1 */
.pill-ambar{background:var(--ambar-suave);color:var(--ambar-texto)}   /* 5,07:1 */
.pill-rojo{background:var(--rojo-suave);color:var(--rojo-texto)}      /* 6,07:1 */
.pill-gris{background:var(--grilla);color:#5A6172}                    /* 5,48:1 */
.pill-violeta{background:#EDE8FA;color:#5B3BA0}                       /* 6,80:1 */

/* ============================================================
   EL PORTAL OSCURO
   ------------------------------------------------------------
   El portal del paciente tiene su propia paleta, y está escrita
   con valores literales DENTRO de `.portal-body`, no como
   var(--noche-3). O sea que no se repinta sola con el :root de
   arriba: hay que repetirla acá o el portal queda con el azul
   violáceo del sistema mientras el panel ya es Helsek.

   Contrastes medidos sobre el lienzo #0C1A2D: 17,5 / 11,9 / 8,7
   para los tres niveles de texto.
   ============================================================ */
.portal-body{
  --portal-lienzo:#12263F;          /* la tinta de la marca */
  --portal-tinta:#FFFFFF;           /* 15,3:1 */
  --portal-tinta-2:#C9D6E8;         /* 10,4:1 */
  --portal-tinta-3:#A8B8CE;         /*  7,6:1 */
  --portal-linea:rgba(255,255,255,.10);
  --portal-vidrio:rgba(255,255,255,.06);
  --portal-vidrio-borde:rgba(255,255,255,.12);
  --portal-cielo:linear-gradient(168deg, #12263F, #1D3454 58%, #12263F);
  --portal-brillo-a:rgba(168,203,250,.26);
  --portal-brillo-b:rgba(27,75,143,.26);
}

/* La barra de pasos: sus colores también están a mano, y se
   dibuja sobre el azul, así que son claros sobre oscuro. */
.paso{color:#9FB4CE}                                  /* 8,24:1 */
.paso .num{background:rgba(255,255,255,.13);color:#C9D6E8}
.paso.hecho{color:#7FD9B4}                            /* 10,39:1 */

/* ⚠️ Acá la decisión del sistema se INVIERTE, y no es un
   descuido: el menta del sistema (#0FA98D) es claro, así que
   encima iba texto verde muy oscuro (#04241E, 4,93:1). El verde
   de Helsek (#2E7D5B) es bastante más oscuro, y ese mismo texto
   oscuro cae a 3,29:1. Sobre este verde el que pasa es el
   blanco: 5,00:1. */
.paso.hecho .num{background:var(--menta);color:#fff}
.portal-body .btn-menta{
  background:linear-gradient(180deg, #38906A, var(--menta));
  color:#fff;
}
.portal-body .btn-menta:hover{
  background:linear-gradient(180deg, #2E7D5B, #236047);
  color:#fff;
}

/* ------------------------------------------------------------
   MENOS MOVIMIENTO
   ------------------------------------------------------------
   El CSS del sistema ya trae su propio bloque de
   prefers-reduced-motion. No se toca: se agrega sólo lo de la
   cáscara de la muestra, y se AQUIETA en lugar de apagar.
   Apagar del todo deja la muestra pareciendo trabada en una
   máquina que pide menos movimiento —que es exactamente el
   caso de la máquina desde la que se revisa esto.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .pill-respira{animation-duration:6s}
}