/* Portada del instrumento · vidrio luminoso y ondas en movimiento.
   Esta capa se limita a las tres etapas y se carga después del tema común. */
html body #expedienteContenido .instrumento-portada {
  position:relative; isolation:isolate; padding:38px;
  margin:-14px -24px 0; border-radius:40px;
}
#expedienteContenido .instrumento-ambiente {
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  border-radius:40px; background:linear-gradient(125deg,#f5fcfc,#eef6ff 52%,#f4f0ff);
}
#expedienteContenido .instrumento-ambiente-luz {
  position:absolute; width:70%; height:90%; border-radius:50%;
  background:radial-gradient(ellipse,#9debd677,transparent 68%);
  left:-22%; top:0; animation:instrumento-luz-flotar 18s ease-in-out infinite alternate;
}
#expedienteContenido .instrumento-ambiente-luz.azul {
  left:20%; top:15%; background:radial-gradient(ellipse,#9dcdff80,transparent 68%);
  animation-duration:23s; animation-delay:-9s;
}
#expedienteContenido .instrumento-ambiente-luz.violeta {
  left:64%; top:-20%; background:radial-gradient(ellipse,#c2a3ff66,transparent 68%);
  animation-duration:21s; animation-delay:-5s;
}
#expedienteContenido .instrumento-ambiente-ondas {
  position:absolute; width:150%; height:145%; left:-25%; top:-20%;
  animation:instrumento-ondas-flotar 25s ease-in-out infinite alternate;
}
#expedienteContenido .instrumento-portada-cab { position:relative; max-width:none; padding-right:170px; }
#expedienteContenido .instrumento-portada-cab h1 {
  font-family:var(--fuente); font-size:clamp(34px,3.5vw,48px); font-weight:650;
  color:#17243e; letter-spacing:-.045em; margin:13px 0;
}
#expedienteContenido .instrumento-portada-cab p { max-width:650px; color:#58677e; font-size:16px; }
#expedienteContenido .instrumento-sobretitulo { color:#53667e; }
#expedienteContenido .instrumento-movimiento {
  position:absolute; right:0; top:0; display:inline-flex; align-items:center; gap:8px;
  min-height:38px; padding:8px 13px; border:1px solid #ffffffd9; border-radius:999px;
  background:#ffffff99; box-shadow:0 3px 12px #27365b08; color:#53627b;
  font:600 11px/1.3 var(--fuente); cursor:pointer;
}
#expedienteContenido .instrumento-movimiento svg { width:13px; height:13px; }
#expedienteContenido .instrumento-movimiento:hover { background:#fff; color:#17243e; }
#expedienteContenido .instrumento-movimiento:focus-visible { outline:3px solid #176aca; outline-offset:4px; }
html body #expedienteContenido .instrumento-etapas { gap:28px; margin-top:34px; }
html body #expedienteContenido .instrumento-etapa {
  --vidrio-acento:#008467; --vidrio-brillo:#0fc6a3; --vidrio-profundo:#006758;
  --vidrio-rgb:0,151,117; --vidrio-claro:#c9f6e9;
  display:flex; flex-direction:column; gap:0; min-height:466px; padding:30px 27px;
  border:1.5px solid #fffffff2 !important; border-radius:32px;
  background:linear-gradient(145deg,#ffffffb5,#ffffff57 62%,#ffffff8c) !important;
  color:#101a34 !important; transform:translateZ(0);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #ffffffb3,0 18px 45px -24px rgba(var(--vidrio-rgb),.38) !important;
  backdrop-filter:blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
  transition:transform .35s ease,box-shadow .35s ease;
}
html body #expedienteContenido .instrumento-etapa[data-tono="azul"] {
  --vidrio-acento:#075dcc; --vidrio-brillo:#22a9ff; --vidrio-profundo:#034bb4;
  --vidrio-rgb:0,107,229; --vidrio-claro:#d2eaff;
}
html body #expedienteContenido .instrumento-etapa[data-tono="violeta"] {
  --vidrio-acento:#6930d3; --vidrio-brillo:#a66bff; --vidrio-profundo:#4b1ca7;
  --vidrio-rgb:116,66,222; --vidrio-claro:#e9dcff;
}
html body #expedienteContenido .instrumento-etapa::before {
  opacity:.8; background:radial-gradient(ellipse at 100% 0%,rgba(var(--vidrio-rgb),.12),transparent 55%),radial-gradient(240px circle at var(--cursor-x,30%) var(--cursor-y,10%),#ffffffa6,transparent 80%) !important;
}
html body #expedienteContenido .instrumento-etapa::after {
  content:""; display:block; inset:-110px -75px auto auto; width:270px; height:260px;
  border-radius:46% 54% 42% 58%; transform:rotate(-22deg);
  border:1px solid #ffffff94; background:linear-gradient(145deg,#ffffff12,#ffffff6b);
  transition:none; pointer-events:none;
}
html body #expedienteContenido .instrumento-etapa:is(:hover,:focus-visible) {
  transform:translateY(-6px); filter:none;
  box-shadow:inset 0 1px 0 #fff,0 26px 48px -24px rgba(var(--vidrio-rgb),.48) !important;
}
html body #expedienteContenido .instrumento-etapa:is(:hover,:focus-visible)::after { transform:rotate(-22deg); }
html body #expedienteContenido .instrumento-etapa:focus-visible { outline:3px solid var(--vidrio-acento); outline-offset:5px; }
html body #expedienteContenido .instrumento-etapa:active { transform:translateY(-1px); }
html body #expedienteContenido .instrumento-etapa-icono {
  width:92px; height:92px; margin:0 0 24px; border-radius:25px;
  color:var(--vidrio-acento); background:linear-gradient(145deg,#fff,#ffffff80) !important;
  box-shadow:inset 0 2px 0 #fff,0 13px 24px -12px rgba(var(--vidrio-rgb),.35) !important;
}
html body #expedienteContenido .instrumento-etapa-icono svg { width:78px !important; height:78px !important; }
html body #expedienteContenido .instrumento-etapa-numero {
  align-self:flex-start; padding:8px 14px; border:0; border-radius:999px;
  background:rgba(var(--vidrio-rgb),.08); color:var(--vidrio-acento) !important;
  font-size:10px; font-weight:750; letter-spacing:.13em;
}
html body #expedienteContenido .instrumento-etapa h2 {
  margin:16px 0 12px; color:#111b34 !important;
  font-family:var(--fuente); font-size:clamp(30px,3.15vw,43px); font-weight:750 !important;
  line-height:1.08; letter-spacing:-.05em; text-shadow:none !important;
}
html body #expedienteContenido .instrumento-etapa p {
  margin:0 0 25px; color:#57647d !important; font-size:14px; line-height:1.65;
}
#expedienteContenido .instrumento-etapa-estado {
  display:flex; align-items:center; gap:11px; min-height:64px; margin-top:auto; margin-bottom:18px;
  padding:10px 12px; border:1px solid #ffffffa6; border-radius:21px; background:#ffffff91;
  color:#263650; font-size:12px; line-height:1.35;
}
#expedienteContenido .instrumento-estado-icono {
  display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:13px;
  color:var(--vidrio-acento); background:linear-gradient(145deg,#fff,var(--vidrio-claro));
}
#expedienteContenido .instrumento-estado-icono svg { width:22px; height:22px; }
#expedienteContenido .instrumento-etapa-estado strong {
  color:var(--vidrio-acento); font-size:25px; font-weight:750; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
html body #expedienteContenido .instrumento-etapa-accion {
  margin-top:0; min-height:57px; gap:10px; padding:12px 17px;
  border:1px solid rgba(var(--vidrio-rgb),.15) !important; border-radius:999px;
  background:linear-gradient(170deg,var(--vidrio-brillo),var(--vidrio-acento) 45%,var(--vidrio-profundo)) !important;
  color:#fff !important; box-shadow:inset 0 2px 2px #ffffff70,inset 0 -2px 3px #0000000d,0 12px 22px -9px rgba(var(--vidrio-rgb),.55) !important;
  font-size:14px; font-weight:650;
}
html body #expedienteContenido .instrumento-etapa-accion span {
  width:25px; height:25px; background:transparent !important; color:#fff; font-size:24px;
}
html body #expedienteContenido .instrumento-etapa:is(:hover,:focus-visible) .instrumento-etapa-accion span { transform:translateX(3px); }
@keyframes instrumento-luz-flotar {
  from { transform:translate3d(-4%,-6%,0) scale(.92); }
  to { transform:translate3d(12%,10%,0) scale(1.15); }
}
@keyframes instrumento-ondas-flotar {
  from { transform:translate3d(-3%,-2%,0) rotate(-6deg); }
  to { transform:translate3d(4%,4%,0) rotate(7deg); }
}
#expedienteContenido .instrumento-portada[data-movimiento="pausado"] .instrumento-ambiente * { animation-play-state:paused; }
@media (max-width:1100px) and (min-width:861px) {
  html body #expedienteContenido .instrumento-portada { padding:28px; margin-inline:-14px; }
  html body #expedienteContenido .instrumento-etapas { gap:18px; }
  html body #expedienteContenido .instrumento-etapa { padding:25px 21px; }
  html body #expedienteContenido .instrumento-etapa-accion { font-size:12px; padding-inline:14px; }
}
@media (max-width:860px) {
  html body #expedienteContenido .instrumento-portada { padding:25px; margin-inline:-10px; border-radius:30px; }
  #expedienteContenido .instrumento-portada-cab { padding-right:0; }
  #expedienteContenido .instrumento-movimiento { position:static; margin-top:18px; }
  html body #expedienteContenido .instrumento-etapas { grid-template-columns:1fr; gap:20px; margin-top:26px; }
  html body #expedienteContenido .instrumento-etapa { display:grid; grid-template-columns:84px minmax(0,1fr); gap:0 22px; min-height:0; padding:25px; }
  html body #expedienteContenido .instrumento-etapa-icono { grid-column:1; grid-row:1 / 3; width:84px; height:84px; margin:0; border-radius:23px; }
  html body #expedienteContenido .instrumento-etapa-icono svg { width:72px !important; height:72px !important; }
  html body #expedienteContenido .instrumento-etapa-numero { grid-column:2; grid-row:1; justify-self:start; font-size:9px; padding:7px 10px; }
  html body #expedienteContenido .instrumento-etapa h2 { grid-column:2; grid-row:2; margin:9px 0 0; font-size:34px; }
  html body #expedienteContenido .instrumento-etapa p { grid-column:1 / -1; grid-row:3; margin:22px 0 18px; }
  #expedienteContenido .instrumento-etapa-estado { grid-column:1 / -1; grid-row:4; margin-top:0; margin-bottom:15px; }
  html body #expedienteContenido .instrumento-etapa-accion { grid-column:1 / -1; grid-row:5; margin-top:0; }
}
@media (max-width:480px) {
  html body #expedienteContenido .instrumento-portada { padding:20px 14px; margin-inline:-8px; }
  html body #expedienteContenido .instrumento-etapa { padding:22px 20px; gap:0 15px; grid-template-columns:66px minmax(0,1fr); border-radius:27px; }
  html body #expedienteContenido .instrumento-etapa-icono { width:66px; height:72px; border-radius:20px; }
  html body #expedienteContenido .instrumento-etapa-icono svg { width:60px !important; height:60px !important; }
  html body #expedienteContenido .instrumento-etapa h2 { font-size:29px; }
  html body #expedienteContenido .instrumento-etapa-numero { font-size:8px; letter-spacing:.09em; }
}
@media (prefers-reduced-motion:reduce) {
  #expedienteContenido .instrumento-ambiente * { animation:none !important; }
  #expedienteContenido .instrumento-movimiento { display:none; }
  html body #expedienteContenido .instrumento-etapa,
  html body #expedienteContenido .instrumento-etapa * { animation:none !important; transition:none !important; }
  html body #expedienteContenido .instrumento-etapa:is(:hover,:focus-visible) { transform:none !important; }
}