/* ============================================================
   MUESTRA HELSEK — tokens y cáscara común
   ------------------------------------------------------------
   Los colores son los mismos de la landing (helsek.com.ar), no
   una copia parecida: si algún día se retoca la marca, se
   retoca acá con los mismos nombres.

   Lo que agrega este archivo sobre la landing:
     · la cinta de "datos de demostración"
     · la pantalla del portero (la clave)
     · el índice de muestras
     · la barra inferior de navegación entre muestras
   El look de las pantallas del sistema NO está acá: eso lo
   trae el CSS real del panel, que se carga aparte.
   ============================================================ */

:root{
  /* --- paleta Helsek, igual que la landing --- */
  --tinta:#12263F;
  --azul:#1B4B8F;
  --azul-claro:#3C7DD9;
  --azul-papel:#EAF1FA;
  --papel:#FBFAF8;
  --linea:#DFE4EC;
  --gris:#61708A;
  --verde:#2E7D5B;
  --celeste:#A8CBFA;     /* acento del ECG sobre azul (del isotipo) */
  --azul-hover:#17407b;

  /* --- estados de turno: se eligieron para que se distingan
         también en escala de grises, porque esto se muestra
         proyectado y en pantallas de celular al sol --- */
  --e-atendido:#2E7D5B;
  --e-confirmado:#1B4B8F;
  --e-pendiente:#9A6B12;
  --e-ausente:#8A5A00;
  --e-cancelado:#8C3A3A;
  --e-sobreturno:#6B4BA8;

  --ancho:1040px;
  --lado:28px;
  --r:12px;
  --sombra:0 1px 2px rgba(18,38,63,.04), 0 8px 28px rgba(18,38,63,.06);
  --sombra-alta:0 2px 6px rgba(18,38,63,.06), 0 24px 60px rgba(18,38,63,.12);
  --curva:cubic-bezier(.2,.7,.3,1);
  --cinta-alto:34px;
}
@media (min-width:1200px){ :root{--lado:36px} }
@media (min-width:1400px){ :root{--ancho:1160px;--lado:40px} }

*{box-sizing:border-box}

/* ⚠️ `hidden` NO alcanza por sí solo.
   El atributo vale `display:none` desde la hoja del navegador, y
   cualquier regla propia que declare un `display` le gana por
   especificidad. `.portero` declara `display:grid`, así que
   `portero.hidden = true` dejaba la pantalla de la clave a la
   vista CON el índice dibujado abajo: las dos cosas juntas.
   Se descubrió en una captura, no en el DOM — el atributo estaba
   puesto y el JS reportaba que sí. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.env{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}

/* Firma tipográfica de Helsek: el <em> no va en italic, va en azul. */
em{font-style:normal;color:var(--azul)}

.et{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);font-weight:600;margin:0 0 14px;
}

h1,h2,h3{letter-spacing:-.032em;font-weight:600;margin:0}
h1{font-size:clamp(28px,3.2vw,44px);line-height:1.06;letter-spacing:-.038em}
h2{font-size:clamp(20px,2.1vw,27px);line-height:1.14}
h3{font-size:17px;letter-spacing:-.018em}

.sub{margin:13px 0 0;font-size:15.2px;line-height:1.6;color:var(--gris);max-width:58ch}

.regla{height:3px;width:58px;background:var(--azul);border-radius:2px;margin:24px 0 0}

a{color:var(--azul)}

/* ------------------------------------------------------------
   BOTONES — copiados de la landing para que no haya dos idiomas
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--azul);color:#fff;border:1px solid var(--azul);
  border-radius:9px;padding:11px 19px;font:inherit;font-size:14.5px;font-weight:600;
  letter-spacing:.005em;cursor:pointer;
  transition:transform .18s var(--curva), box-shadow .18s ease, background .18s ease;
  box-shadow:0 1px 2px rgba(27,75,143,.2);
}
.btn:hover{background:var(--azul-hover);transform:translateY(-1px);box-shadow:0 6px 18px rgba(27,75,143,.24)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.fantasma{background:#fff;color:var(--tinta);border-color:var(--linea);box-shadow:var(--sombra)}
.btn.fantasma:hover{background:#fff;border-color:#c3cede}

/* Foco visible y consistente: esto se muestra en vivo y se navega
   con el teclado más de lo que uno cree. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--azul);outline-offset:2px;border-radius:6px;
}

/* ------------------------------------------------------------
   CINTA DE DEMOSTRACIÓN
   ------------------------------------------------------------
   No es decoración ni un disclaimer legal: es para que a quien
   le muestres esto no le quede ni un segundo la duda de que
   estás abriendo la historia clínica de pacientes de otro
   consultorio delante suyo. Queda fija arriba, en todas las
   pantallas de la muestra.
   ------------------------------------------------------------ */
.cinta{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  height:var(--cinta-alto);
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--tinta);color:#fff;
  font-size:12.2px;font-weight:500;letter-spacing:.01em;
  padding:0 12px;
}
.cinta b{font-weight:700;color:var(--celeste)}
.cinta .punto{
  width:6px;height:6px;border-radius:50%;background:var(--celeste);
  flex:0 0 auto;animation:latir 2.4s var(--curva) infinite;
}
.cinta .salir{
  margin-left:auto;color:rgba(255,255,255,.72);background:none;border:0;
  font:inherit;font-size:11.5px;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;padding:4px 6px;
}
.cinta .salir:hover{color:#fff}
@keyframes latir{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

body.con-cinta{padding-top:var(--cinta-alto)}

@media (max-width:560px){
  .cinta{font-size:11px;gap:7px}
  .cinta .larga{display:none}
}

/* ------------------------------------------------------------
   PORTERO (la pantalla de la clave)
   ------------------------------------------------------------ */
.portero{
  min-height:100vh;display:grid;place-items:center;padding:40px 20px;
  position:relative;overflow:hidden;
}
.portero .brillo{
  position:absolute;inset:-30% -10% auto auto;width:min(680px,80vw);aspect-ratio:1;
  background:radial-gradient(circle at 60% 40%, rgba(60,125,217,.16), rgba(60,125,217,0) 62%);
  pointer-events:none;z-index:1;
}
.portero-caja{
  position:relative;z-index:2;width:100%;max-width:410px;
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra-alta);padding:34px 30px 28px;text-align:center;
}
.portero-caja img.lockup{width:132px;height:auto;margin:0 auto 22px;display:block}
.portero-caja h1{font-size:21px;letter-spacing:-.022em;margin:0 0 8px}
.portero-caja p{margin:0 0 22px;font-size:14.2px;color:var(--gris);line-height:1.55}
.campo-clave{display:flex;flex-direction:column;gap:10px;text-align:left}
.campo-clave label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.campo-clave input{
  font:inherit;font-size:16px;padding:12px 14px;
  border:1px solid var(--linea);border-radius:9px;background:var(--papel);
  color:var(--tinta);width:100%;transition:border-color .18s ease, background .18s ease;
}
.campo-clave input:focus{border-color:var(--azul);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(27,75,143,.12)}
.campo-clave .btn{justify-content:center;margin-top:4px}
.portero-error{
  margin:14px 0 0;font-size:13.2px;color:#8C3A3A;font-weight:500;
  min-height:1.2em;
}
.portero-pie{margin:24px 0 0;font-size:12px;color:var(--gris);line-height:1.5}
.portero-pie a{color:var(--gris);text-decoration:underline;text-underline-offset:2px}

/* Sacudón corto cuando la clave está mal: el error escrito solo
   se lee si ya estabas mirando ahí. */
.sacudir{animation:sacudir .34s var(--curva)}
@keyframes sacudir{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-7px)}
  55%{transform:translateX(6px)}
  80%{transform:translateX(-3px)}
}

/* ------------------------------------------------------------
   ÍNDICE DE MUESTRAS
   ------------------------------------------------------------ */
.cabecera-indice{padding:52px 0 10px}
.cabecera-indice img.lockup{width:124px;height:auto;display:block;margin:0 0 30px}

.rejilla-muestras{
  display:grid;gap:22px;margin:38px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
}

.tarjeta-muestra{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sombra);
  transition:transform .2s var(--curva), box-shadow .2s ease, border-color .2s ease;
}
.tarjeta-muestra:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:#c3cede}

/* El mockup de ventana es un motivo que ya usa la landing:
   barra gris con tres luces. Se repite acá a propósito. */
.ventana-top{
  display:flex;align-items:center;gap:9px;
  background:#F4F6FA;border-bottom:1px solid var(--linea);
  padding:9px 13px;
}
.luces{display:flex;gap:5px}
.luces i{width:8px;height:8px;border-radius:50%;background:#D8DFEA;display:block}
.ventana-top .pista{font-size:11.5px;color:var(--gris);font-weight:500;letter-spacing:.01em}

.tarjeta-lamina{
  aspect-ratio:16/9;background:#EDF1F7;position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.tarjeta-lamina svg{width:100%;height:100%;display:block}

.tarjeta-txt{padding:20px 21px 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.tarjeta-grupo{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:600}
.tarjeta-tit{font-size:17.5px;font-weight:600;letter-spacing:-.02em}
.tarjeta-baj{font-size:14px;color:var(--gris);line-height:1.55;flex:1}
.tarjeta-ir{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-size:14px;font-weight:600;color:var(--azul);
}
.tarjeta-muestra:hover .tarjeta-ir svg{transform:translateX(3px)}
.tarjeta-ir svg{transition:transform .2s var(--curva)}

.aviso-datos{
  margin:40px 0 0;padding:16px 18px;
  background:var(--azul-papel);border:1px solid #CBDCF3;border-radius:var(--r);
  font-size:13.6px;color:var(--tinta);line-height:1.55;
}
.aviso-datos b{font-weight:600}

.pie-indice{padding:44px 0 70px;font-size:12.6px;color:var(--gris)}

/* ------------------------------------------------------------
   BARRA INFERIOR — para saltar entre muestras sin volver atrás
   ------------------------------------------------------------ */
.barra-muestras{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:8000;
  display:flex;align-items:center;gap:4px;
  background:rgba(18,38,63,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:999px;padding:5px;
  box-shadow:0 6px 24px rgba(18,38,63,.28);
  max-width:calc(100vw - 24px);
}
.barra-muestras a{
  display:inline-flex;align-items:center;gap:7px;
  color:rgba(255,255,255,.76);text-decoration:none;
  font-size:13px;font-weight:500;padding:8px 15px;border-radius:999px;
  white-space:nowrap;transition:background .18s ease, color .18s ease;
}
.barra-muestras a:hover{color:#fff;background:rgba(255,255,255,.1)}
.barra-muestras a[aria-current="page"]{background:#fff;color:var(--tinta);font-weight:600}
@media (max-width:560px){
  .barra-muestras a{font-size:12px;padding:8px 12px}
  .barra-muestras a .corta{display:none}
}

/* Se va cuando estorba (ver js/barra.js). Flotando sobre una
   lista larga se comía un renglón: medido en la agenda, tapaba
   el turno de las 10:30. */
.barra-muestras{
  transition:transform .26s var(--curva), opacity .26s ease;
}
.barra-muestras.barra-oculta{
  transform:translateX(-50%) translateY(140%);
  opacity:0;
  pointer-events:none;
}

/* ------------------------------------------------------------
   MENOS MOVIMIENTO
   ------------------------------------------------------------
   Acá NO se apaga la animación: se aquieta. Apagarla del todo
   deja la cinta con el punto muerto y las tarjetas sin respuesta
   al hover, y eso se lee como "está roto", no como "está quieto"
   —sobre todo en una máquina con los efectos de Windows
   desactivados, donde esta regla se activa siempre.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .cinta .punto{animation-duration:6s}
  .tarjeta-muestra{transition-duration:.01s}
  .tarjeta-muestra:hover{transform:none}
  .tarjeta-ir svg{transition:none}
  .sacudir{animation:none;outline:2px solid #8C3A3A;outline-offset:2px}
  /* La barra sigue yéndose: lo molesto era el deslizado, no que
     se vaya. Acá desaparece de una, sin viaje. */
  .barra-muestras{transition:none}
}