:root{
  /* Sample Hi Lab inspired palette */
  --hilab-primary:#38bdf8;
  --hilab-primary-2:#0369a1;
  --hilab-accent:#34d399;
  --hilab-surface:#0f2744;
  --hilab-ink:#e2e8f0;
  --hilab-ink-2:#091118;
  --hilab-bg0:#0b1a30;
  --hilab-bg1:#091525;

  /* Logo encabezado (homologado en toda la plataforma) */
  --hilab-header-logo-h: 64px;
  --hilab-header-logo-max-w: 240px;

  --bg0: var(--hilab-bg0);
  --bg1: var(--hilab-bg1);
  --text: rgba(241,245,249,0.96);
  --muted: rgba(148,163,184,0.92);
  --faint: rgba(148,163,184,0.72);
  --blue: var(--hilab-primary);
  --blue2: var(--hilab-primary-2);
  --stroke: rgba(56,189,248,0.18);
  --stroke2: rgba(56,189,248,0.28);
  --glass: rgba(15,39,68,0.55);
  --glass2: rgba(15,39,68,0.72);
}

/* Encabezados: mismo tamaño de logo Hi Lab Solutions */
.ah-topbar__logo,
.brand-logo,
.afla-brand__logo,
.pm-topbar-brand__logo,
.ml-brand > img,
.pd-brand__logo {
  height: var(--hilab-header-logo-h);
  width: auto;
  max-width: var(--hilab-header-logo-max-w);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  :root {
    --hilab-header-logo-h: 52px;
    --hilab-header-logo-max-w: 190px;
  }
}

body{
  font-family: "DM Sans", Roboto, Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

.welcome-title,
.section-title,
.pm-page-title,
.pm-mod-head__title,
.act-title,
.pm-project-card__title{
  font-family: "Source Serif 4", Georgia, serif;
}

/* Buttons (Nivel 1: solo piel) */
.btn{
  border-radius: 14px;
  font-weight: 700;
}
.btn-primary{
  background: linear-gradient(180deg, rgba(56,189,248,0.95), rgba(3,105,161,0.9));
  border-color: rgba(56,189,248,0.35);
  box-shadow: 0 6px 0 rgba(30,74,122,0.55);
}
.btn-secondary{
  background: rgba(255,255,255,0.06);
  border-color: rgba(56,189,248,0.22);
}
.btn-ghost{
  background: rgba(255,255,255,0.04);
  border-color: rgba(56,189,248,0.16);
}

.pm-badge{
  border-color: rgba(56,189,248,0.22);
  background: rgba(56,189,248,0.1);
}

/* Tables headers slightly cleaner */
.pm-table th{
  color: rgba(220,235,255,0.72);
}

/* ── Cursor tubo de ensayo Hi Lab ── */
html.hilab-cursor-on,
html.hilab-cursor-on body,
html.hilab-cursor-on body * {
  cursor: none !important;
}

.hilab-cursor,
.hilab-cursor:popover-open {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  inset: unset !important;
  z-index: 2147483000;
  width: 28px !important;
  height: 42px !important;
  pointer-events: none !important;
  opacity: 0;
  transform: none !important;
  transition: opacity 0.18s ease, filter 0.28s ease;
  will-change: left, top, filter;
  filter: drop-shadow(0 6px 10px rgba(14, 165, 233, 0.26));
  /* Anula el UA de [popover] (centrado con inset:0 + margin:auto). */
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  max-width: none !important;
  max-height: none !important;
  color-scheme: normal;
  box-sizing: border-box !important;
}

/* Con dialog abierto: cursor nativo del navegador (text en inputs, pointer en botones).
   No usar `auto` en * — anula el I-beam / mano. `revert` recupera el estilo UA. */
html.hilab-cursor-no-popover:has(dialog[open]),
html.hilab-cursor-no-popover:has(dialog[open]) body {
  cursor: auto !important;
}
html.hilab-cursor-no-popover:has(dialog[open]) body * {
  cursor: revert !important;
}
html.hilab-cursor-no-popover:has(dialog[open]) .hilab-cursor {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hilab-cursor.is-on {
  opacity: 1;
}

.hilab-cursor.is-laser {
  filter:
    drop-shadow(0 0 10px rgba(244, 63, 94, 0.75))
    drop-shadow(0 0 22px rgba(251, 191, 36, 0.45))
    drop-shadow(0 4px 12px rgba(244, 63, 94, 0.35));
}

/* Retícula láser siempre visible (también sobre fondos blancos / logos). */
.hilab-cursor.is-laser::after {
  content: "";
  position: absolute;
  left: var(--hc-hot-x, 14px);
  top: var(--hc-hot-y, 38px);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #fff;
  background: radial-gradient(circle at 50% 50%, #fff 0 18%, #ff2d55 19% 55%, rgba(255, 45, 85, 0.15) 56% 100%);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.55),
    0 0 10px rgba(255, 45, 85, 0.95),
    0 0 22px rgba(251, 191, 36, 0.65);
  pointer-events: none;
  z-index: 5;
}

.hilab-cursor__trail {
  position: absolute;
  left: 14px;
  top: 38px;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hilab-cursor__spark {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff 0%, #fb7185 40%, #f43f5e 70%, transparent 100%);
  box-shadow: 0 0 8px rgba(251, 113, 133, 0.9);
  will-change: transform, opacity;
}

.hilab-cursor__beam {
  position: absolute;
  left: 11px;
  top: 34px;
  width: 6px;
  height: 18px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 63, 94, 0.55), transparent);
  filter: blur(1.2px);
  transform: translateY(4px) scaleY(0.4);
  transform-origin: 50% 0%;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.hilab-cursor.is-laser .hilab-cursor__beam {
  opacity: 0.9;
  transform: translateY(8px) scaleY(1);
  animation: hilabCursorBeam 1.1s ease-in-out infinite alternate;
}

.hilab-cursor__svg {
  display: block;
  overflow: visible;
  transform-origin: 50% 88%;
  transform: rotate(-18deg) scale(1);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}

.hilab-cursor.is-hot .hilab-cursor__svg {
  transform: rotate(-8deg) scale(1.1);
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.5));
}

.hilab-cursor.is-laser.is-hot .hilab-cursor__svg {
  filter: drop-shadow(0 0 10px rgba(251, 113, 133, 0.85));
}

.hilab-cursor.is-press .hilab-cursor__svg {
  transform: rotate(-22deg) scale(0.9);
}

.hilab-cursor.is-laser .hilab-cursor__fill {
  animation: hilabCursorFill 1.4s ease-in-out infinite alternate;
}

.hilab-cursor.is-laser .hilab-cursor__tip {
  animation: hilabCursorTipLaser 0.7s ease-in-out infinite alternate;
}

.hilab-cursor__fill {
  animation: hilabCursorFill 2.8s ease-in-out infinite alternate;
}

.hilab-cursor__wave {
  animation: hilabCursorWave 1.6s ease-in-out infinite;
}

.hilab-cursor__bubble--1 {
  animation: hilabCursorBubble 2.1s ease-in infinite;
}
.hilab-cursor__bubble--2 {
  animation: hilabCursorBubble 2.6s ease-in 0.4s infinite;
}
.hilab-cursor__bubble--3 {
  animation: hilabCursorBubble 2.3s ease-in 0.85s infinite;
}

.hilab-cursor__tip {
  animation: hilabCursorTip 1.4s ease-in-out infinite alternate;
}

.hilab-cursor__puff--1 {
  animation: hilabCursorSteam 2.2s ease-out infinite;
}
.hilab-cursor__puff--2 {
  animation: hilabCursorSteam 2.6s ease-out 0.35s infinite;
}
.hilab-cursor__puff--3 {
  animation: hilabCursorSteam 2.4s ease-out 0.7s infinite;
}

@keyframes hilabCursorFill {
  from { transform: translateY(2px); }
  to { transform: translateY(-3px); }
}

@keyframes hilabCursorWave {
  0%, 100% { transform: translateX(0); opacity: 0.75; }
  50% { transform: translateX(1.2px); opacity: 1; }
}

@keyframes hilabCursorBubble {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translateY(-16px); opacity: 0; }
}

@keyframes hilabCursorTip {
  from { opacity: 0.7; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.12); }
}

@keyframes hilabCursorTipLaser {
  from { opacity: 0.85; transform: scale(1); }
  to { opacity: 1; transform: scale(1.35); }
}

@keyframes hilabCursorBeam {
  from { opacity: 0.55; filter: blur(1px); }
  to { opacity: 1; filter: blur(1.6px); }
}

@keyframes hilabCursorSteam {
  0% {
    transform: translate(0, 4px) scale(0.55);
    opacity: 0;
  }
  18% {
    opacity: 0.85;
  }
  100% {
    transform: translate(2px, -14px) scale(1.35);
    opacity: 0;
  }
}

@keyframes hilabCursorHue {
  0% { filter: hue-rotate(0deg) saturate(1); }
  50% { filter: hue-rotate(28deg) saturate(1.2); }
  100% { filter: hue-rotate(0deg) saturate(1); }
}

@keyframes hilabCursorLogoAura {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 0.85; transform: scale(1.12); }
}

@keyframes hilabCursorLogoShine {
  0% { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55)) hue-rotate(0deg); }
  50% { filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.75)) hue-rotate(40deg); }
  100% { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55)) hue-rotate(0deg); }
}

.hilab-cursor[data-skin="logo"] {
  filter: drop-shadow(0 4px 10px rgba(14, 165, 233, 0.35));
  animation: hilabCursorLogoShine 3.6s ease-in-out infinite;
}

.hilab-cursor[data-skin="logo"].is-laser {
  animation: none;
  filter:
    drop-shadow(0 0 12px rgba(255, 45, 85, 0.95))
    drop-shadow(0 0 28px rgba(251, 191, 36, 0.7))
    drop-shadow(0 0 40px rgba(244, 63, 94, 0.55));
}

.hilab-cursor__logo-wrap {
  position: relative;
  width: 32px;
  height: 32px;
}

.hilab-cursor__logo-img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  animation: hilabCursorHue 5s ease-in-out infinite;
}

.hilab-cursor.is-laser .hilab-cursor__logo-img {
  animation: none;
  filter: saturate(1.35) brightness(1.15) hue-rotate(-8deg);
}

.hilab-cursor__logo-aura {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.45), transparent 70%);
  z-index: 1;
  animation: hilabCursorLogoAura 2.4s ease-in-out infinite;
}

.hilab-cursor.is-laser .hilab-cursor__logo-aura {
  background: radial-gradient(circle, rgba(255, 45, 85, 0.65), rgba(251, 191, 36, 0.25), transparent 72%);
}

.hilab-cursor__logo-steam {
  position: absolute;
  width: 6px;
  height: 8px;
  border-radius: 50%;
  background: rgba(186, 230, 253, 0.55);
  z-index: 3;
  pointer-events: none;
}

.hilab-cursor__logo-steam.hilab-cursor__puff--1 { left: 4px; top: -2px; }
.hilab-cursor__logo-steam.hilab-cursor__puff--2 { left: 14px; top: -6px; }
.hilab-cursor__logo-steam.hilab-cursor__puff--3 { left: 22px; top: -1px; }

.hilab-cursor__beam--side {
  left: 28px;
  top: 10px;
  width: 14px;
  height: 5px;
  transform: translateX(4px) scaleX(0.4);
  transform-origin: 0% 50%;
}

.hilab-cursor__beam--logo {
  left: 12px;
  top: 26px;
}

.hilab-cursor[data-skin="bacteria"] .hilab-cursor__bac-body {
  animation: hilabCursorHue 4.5s ease-in-out infinite;
}

.hilab-cursor[data-skin="scope"] .hilab-cursor__scope-lens {
  animation: hilabCursorTip 1.8s ease-in-out infinite alternate;
}

/* Termómetro: frío → calor + humo suave */
@keyframes hilabCursorThermoFill {
  0%, 12% { transform: translateY(14px) scaleY(0.55); }
  45%, 58% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(14px) scaleY(0.55); }
}

@keyframes hilabCursorThermoHue {
  0%, 12% { filter: hue-rotate(-8deg) saturate(1.05); }
  45%, 58% { filter: hue-rotate(18deg) saturate(1.35); }
  100% { filter: hue-rotate(-8deg) saturate(1.05); }
}

@keyframes hilabCursorThermoStop0 {
  0%, 18% { stop-color: #38bdf8; }
  50%, 62% { stop-color: #f97316; }
  100% { stop-color: #38bdf8; }
}
@keyframes hilabCursorThermoStop1 {
  0%, 18% { stop-color: #67e8f9; }
  50%, 62% { stop-color: #fbbf24; }
  100% { stop-color: #67e8f9; }
}
@keyframes hilabCursorThermoStop2 {
  0%, 18% { stop-color: #0ea5e9; }
  50%, 62% { stop-color: #ef4444; }
  100% { stop-color: #0ea5e9; }
}

.hilab-cursor[data-skin="thermo"] {
  filter: drop-shadow(0 5px 10px rgba(14, 165, 233, 0.3));
  animation: hilabCursorThermoHue 4.8s ease-in-out infinite;
}

.hilab-cursor[data-skin="thermo"] .hilab-cursor__thermo-fill {
  transform-origin: 50% 100%;
  animation: hilabCursorThermoFill 4.8s ease-in-out infinite;
}

.hilab-cursor[data-skin="thermo"] .hilab-cursor__thermo-stop0 {
  animation: hilabCursorThermoStop0 4.8s ease-in-out infinite;
}
.hilab-cursor[data-skin="thermo"] .hilab-cursor__thermo-stop1 {
  animation: hilabCursorThermoStop1 4.8s ease-in-out infinite;
}
.hilab-cursor[data-skin="thermo"] .hilab-cursor__thermo-stop2 {
  animation: hilabCursorThermoStop2 4.8s ease-in-out infinite;
}

.hilab-cursor[data-skin="thermo"] .hilab-cursor__thermo-steam {
  opacity: 0.35;
  animation: hilabCursorThermoHue 4.8s ease-in-out infinite;
}

.hilab-cursor[data-skin="thermo"].is-laser {
  animation: none;
  filter:
    drop-shadow(0 0 12px rgba(255, 45, 85, 0.95))
    drop-shadow(0 0 28px rgba(251, 191, 36, 0.7));
}

/* Selector de cursor en encabezado */
.hilab-cursor-pick {
  position: relative;
  margin-left: 6px;
  z-index: 80;
  flex-shrink: 0;
}

.hilab-cursor-pick__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.45);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.28), rgba(16, 185, 129, 0.16));
  color: #f0f9ff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25), 0 0 20px rgba(14, 165, 233, 0.35);
}

.hilab-cursor-pick__btn:hover,
.hilab-cursor-pick.is-open .hilab-cursor-pick__btn {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.28), rgba(16, 185, 129, 0.14));
}

.hilab-cursor-pick__btn-ico {
  color: #67e8f9;
}

.hilab-cursor-pick__chev {
  opacity: 0.7;
  font-size: 0.7rem;
}

.hilab-cursor-pick__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 268px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  background: #07111e;
  background: linear-gradient(165deg, #0c1a2c 0%, #071018 100%);
  box-shadow:
    0 0 0 1px rgba(8, 16, 28, 0.9),
    0 22px 48px rgba(0, 0, 0, 0.72),
    0 0 40px rgba(14, 165, 233, 0.12);
  isolation: isolate;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hilab-cursor-pick__menu[hidden] {
  display: none !important;
}

.hilab-cursor-pick__menu.hilab-cursor-pick__menu--portal {
  position: fixed;
  z-index: 2147483000;
}

.hilab-cursor-pick__title {
  margin: 0 0 6px 4px;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.hilab-cursor-pick__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  flex: 0 0 auto;
  box-sizing: border-box;
  line-height: 1.25;
}

.hilab-cursor-pick__item:hover {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.22);
}

.hilab-cursor-pick__item.is-active {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(14, 165, 233, 0.2);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.15);
}

.hilab-cursor-pick__glyph {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  background-color: #041018;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background-size: 70% 70%;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

.hilab-cursor-pick__glyph[data-skin="vial"] {
  background-image: linear-gradient(180deg, #67e8f9 0%, #10b981 100%);
  clip-path: polygon(32% 10%, 68% 10%, 68% 20%, 60% 24%, 60% 76%, 50% 90%, 40% 76%, 40% 24%, 32% 20%);
}
.hilab-cursor-pick__glyph[data-skin="scope"] {
  clip-path: none;
  background-image:
    radial-gradient(circle at 72% 32%, #ffffff 0 10%, #7dd3fc 12% 28%, #0ea5e9 30% 48%, transparent 50%),
    linear-gradient(180deg, transparent 55%, #0369a1 56% 78%, #075985 79% 100%),
    linear-gradient(90deg, transparent 42%, #38bdf8 43% 57%, transparent 58%);
  background-color: #0b1a2e;
  background-size: 100% 100%;
}
.hilab-cursor-pick__glyph[data-skin="bacteria"] {
  background-image: linear-gradient(90deg, #fda4af, #5eead4);
  border-radius: 999px;
  clip-path: none;
}
.hilab-cursor-pick__glyph[data-skin="logo"] {
  background-image: url("./assets/cursor-logo-microbe-64.png");
  background-size: contain;
  background-color: #041018;
  clip-path: none;
}
.hilab-cursor-pick__glyph[data-skin="pipette"] {
  background-image: linear-gradient(180deg, #c4b5fd, #22d3ee);
  clip-path: polygon(35% 6%, 65% 6%, 65% 28%, 58% 30%, 55% 88%, 45% 88%, 42% 30%, 35% 28%);
}
.hilab-cursor-pick__glyph[data-skin="thermo"] {
  clip-path: none;
  background-image:
    linear-gradient(180deg, #38bdf8 0%, #fbbf24 55%, #f43f5e 100%),
    radial-gradient(circle at 50% 82%, #f43f5e 0 28%, transparent 30%);
  background-size: 28% 62%, 100% 100%;
  background-position: 50% 18%, center;
  background-repeat: no-repeat;
  background-color: #0b1524;
}

.hilab-cursor-pick__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.hilab-cursor-pick__copy strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: #f1f5f9;
}

.hilab-cursor-pick__copy small {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
}

.pd-topbar .hilab-cursor-pick {
  margin-left: 0;
  margin-right: 8px;
  z-index: 950;
}

.pd-topbar .hilab-cursor-pick__menu {
  z-index: 960;
}

.site-nav {
  overflow: visible;
}

.pd-topbar,
.ah-topbar__nav,
.ah-topbar__user,
.topbar-right {
  overflow: visible;
}

@media (max-width: 720px) {
  .hilab-cursor-pick__btn-label {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hilab-cursor__fill,
  .hilab-cursor__wave,
  .hilab-cursor__bubble--1,
  .hilab-cursor__bubble--2,
  .hilab-cursor__bubble--3,
  .hilab-cursor__tip,
  .hilab-cursor__puff--1,
  .hilab-cursor__puff--2,
  .hilab-cursor__puff--3,
  .hilab-cursor.is-laser .hilab-cursor__beam,
  .hilab-cursor__logo-img,
  .hilab-cursor__logo-aura,
  .hilab-cursor[data-skin="logo"],
  .hilab-cursor[data-skin="bacteria"] .hilab-cursor__bac-body,
  .hilab-cursor[data-skin="scope"] .hilab-cursor__scope-lens,
  .hilab-cursor[data-skin="thermo"],
  .hilab-cursor[data-skin="thermo"] .hilab-cursor__thermo-fill,
  .hilab-cursor[data-skin="thermo"] .hilab-cursor__thermo-stop0,
  .hilab-cursor[data-skin="thermo"] .hilab-cursor__thermo-stop1,
  .hilab-cursor[data-skin="thermo"] .hilab-cursor__thermo-stop2 {
    animation: none;
  }
}

@media print {
  html.hilab-cursor-on,
  html.hilab-cursor-on body,
  html.hilab-cursor-on body * {
    cursor: auto !important;
  }
  .hilab-cursor {
    display: none !important;
  }
}