/* Inicio de sesión: imagen del software (LOGIN-PREMIUM-03; marco rehecho en LOGIN-PREMIUM-04 y, como tableta física,
   en LOGIN-PREMIUM-05, agente 1, 18 de octubre de 2026).
   Captura real de la agenda «Día por doctor» de la clínica de demostración (pacientes inventados), sin recortar ni
   retocar. Contrato con login-marca.css: .lgn-brand es una columna flex con .lgn-copy arriba y esta figura al final; la
   figura toma todo el alto que sobra (flex 1) y llega hasta los bordes izquierdo, derecho e inferior del panel con
   márgenes negativos (--lgn-pad-x, --lgn-pad-bottom). Es un contenedor de tamaño (cqw/cqh): el dispositivo se
   dimensiona con el ancho y el alto que le tocan, así en pantallas altas crece y en las bajas muestra una franja. El
   overflow de .lgn-brand lo recorta por abajo, a propósito.

   El dispositivo es una tableta de aluminio anodizado índigo. Nace abajo a la izquierda y sube hacia la derecha (−5°)
   con un escorzo suave: la derecha y el borde superior se alejan, así que el espesor del equipo (el canto) se ve a la
   izquierda y abajo. La luz viene del teal del lado derecho del panel: reflejo frío en el borde superior, una esquina
   (arriba a la derecha) más iluminada y los bordes lejanos más oscuros. Capas, de atrás hacia adelante:
     .lgn-aura     resplandor ambiental de baja opacidad, cargado hacia la esquina iluminada (no un halo parejo)
     .lgn-device   el equipo; la única transformación (--sc-tf). Todas sus capas tienen la misma geometría:
       .lgn-edge     canto: la silueta del chasis desplazada a la izquierda y abajo; lleva las sombras
       .lgn-chassis  marco principal con su borde exterior fino (más claro donde da la luz) y sus reflejos
       .lgn-bevel    bisel interior fino, más oscuro que la pantalla
       .lgn-screen   la pantalla (reglas de la imagen en login-shot.css)
       .lgn-lens     filo del vidrio: una línea interior casi imperceptible (sin brillo sobre la agenda)
   Nitidez: .lgn-device lleva una sola `transform` afín (sin perspective ni scale: con ellas Chrome rasteriza a baja
   escala y la agenda queda borrosa), y ni él ni la pantalla ni sus ancestros llevan filter, backdrop-filter,
   opacidad < 1, mix-blend ni will-change. .lgn-aura copia la transformación con el mismo punto de giro (la esquina
   inferior izquierda del equipo). Queda detrás del texto (.lgn-copy tiene z-index 2); el movimiento de entrada es de
   login-motion.css. */

.lgn-showcase {
  container-type: size;
  position: relative;
  z-index: 1;
  /* Base definida (no `auto`): con contención de tamaño, una base `auto` deja el alto del contenedor en 0 para las
     unidades cqh cuando no sobra espacio. Puede encogerse hasta desaparecer en pantallas muy bajas: el texto manda. */
  flex: 1 1 7rem;
  min-height: 0;
  margin: 0 calc(-1 * var(--lgn-pad-x, clamp(2rem, 4.6vw, 4.75rem))) calc(-1 * var(--lgn-pad-bottom, clamp(1.75rem, 4.6vh, 2.75rem)));
  padding: 0;
  pointer-events: none;

  /* — Geometría (proporciones del ancho del equipo) — */
  /* Grande, como en la referencia: sale por la derecha y por abajo del panel. Mínimo 47 rem (≈ 750 px) en pantallas
     altas. Cuando manda el alto libre (casi siempre en pantallas apaisadas) el ancho es 2,45 veces ese alto: así cabe a
     la vista la primera fila de citas con nombres de pacientes (fase 5; con 2,9 solo se veían encabezados). */
  --sc-w: min(max(110cqw, 47rem), 245cqh);
  /* El giro lleva la esquina superior izquierda hacia la izquierda (≈ sen 5° × alto del equipo): se compensa para que
     el canto izquierdo se vea entero. */
  --sc-x: calc(1.5cqw + var(--sc-w) * .05);
  /* Cuánto sale por abajo (--sc-drop, fracción del ancho): en pantallas bajas el equipo sube hasta que su borde
     superior queda justo bajo el texto y se ven menú, «Agenda», las columnas y la primera fila de citas; en las altas
     queda a 1 rem del texto. El .62 es el alto que ocupa el equipo girado. */
  --sc-drop: .225;
  --sc-bottom: clamp(var(--sc-w) * -1 * var(--sc-drop), 100cqh - var(--sc-w) * .62 - 1rem, var(--sc-w) * -.06);
  /* Escorzo afín (sin perspectiva): la derecha y el borde superior se alejan; el giro sube hacia la derecha. */
  --sc-tf: rotateY(5deg) rotateX(3deg) rotate(-5deg);
  --sc-bezel: calc(var(--sc-w) * .019);                     /* marco, de la silueta a la pantalla */
  --sc-radius: calc(var(--sc-w) * .038);                    /* esquina exterior del chasis */
  --sc-screen-radius: calc(var(--sc-radius) - var(--sc-bezel));
  --sc-edge: max(3px, calc(var(--sc-w) * .006));           /* espesor visible del canto */
  --sc-ring: max(2px, calc(var(--sc-w) * .0026));           /* bisel interior (dentro del marco: no achica la pantalla) */

  /* — Materiales y luz — */
  --sc-light: 140, 226, 230;      /* luz fría que viene del teal del panel (RGB) */
  --sc-shade: 2, 6, 24;           /* sombra: índigo casi negro (RGB) */
  --sc-metal-hi: #2b3672;         /* anodizado donde da la luz */
  --sc-metal: #1b2459;            /* anodizado, cara del marco */
  --sc-metal-lo: #10173f;         /* anodizado lejos de la luz */
  --sc-edge-hi: #1f2961;          /* canto, arriba a la izquierda */
  --sc-edge-mid: #121a47;
  --sc-edge-lo: #070b25;          /* canto, abajo */
  --sc-bevel: #050818;            /* bisel interior */
}

/* 1 · Resplandor ambiental: teal tenue concentrado en la esquina superior derecha (la iluminada) y una penumbra índigo
   muy suave bajo el centro. Sin desenfoque; sobresale poco hacia arriba para no quedar detrás del texto. */
.lgn-aura {
  position: absolute;
  z-index: 0;
  left: calc(var(--sc-x) - var(--sc-w) * .06);
  bottom: calc(var(--sc-bottom) - var(--sc-w) * .08);
  width: calc(var(--sc-w) * 1.12);
  height: calc(var(--sc-w) * .56);
  transform-origin: calc(var(--sc-w) * .06) calc(100% - var(--sc-w) * .08);
  transform: var(--sc-tf);
  background:
    radial-gradient(30% 34% at 88% 22%, rgba(var(--sc-light), .24), rgba(var(--sc-light), 0) 100%),
    radial-gradient(50% 46% at 45% 64%, rgba(79, 110, 255, .14), rgba(79, 110, 255, 0) 100%);
  pointer-events: none;
}

/* 2 · El equipo: solo posición, tamaño y la transformación. El marco (padding) deja la pantalla en su lugar; las
   capas absolutas de adentro dibujan el canto, el chasis y el bisel con la misma silueta. */
.lgn-device {
  position: absolute;
  z-index: 1;
  left: var(--sc-x);
  bottom: var(--sc-bottom);
  box-sizing: border-box;
  width: var(--sc-w);
  padding: var(--sc-bezel);
  border-radius: var(--sc-radius);
  transform-origin: 0 100%;
  transform: var(--sc-tf);
}

.lgn-edge,
.lgn-chassis,
.lgn-bevel,
.lgn-lens {
  position: absolute;
  pointer-events: none;
}

/* 3 · Canto: la misma silueta corrida a la izquierda y abajo (el espesor que deja ver el escorzo). Metal más oscuro
   que la cara, con un filo exterior apenas más claro arriba a la izquierda. Lleva las sombras del equipo: de contacto
   (corta y definida) y ambiental (amplia y suave), sin halos de color. */
.lgn-edge {
  top: var(--sc-edge);
  right: var(--sc-edge);
  bottom: calc(-1 * var(--sc-edge));
  left: calc(-1 * var(--sc-edge));
  border-radius: var(--sc-radius);
  background: linear-gradient(195deg, var(--sc-edge-hi) 0%, var(--sc-edge-mid) 40%, var(--sc-edge-lo) 100%);
  box-shadow:
    inset 1px 0 0 rgba(var(--sc-light), .14),
    0 1px 2px rgba(var(--sc-shade), .55),
    -2px 6px 10px -4px rgba(var(--sc-shade), .45),
    -14px 34px 64px -18px rgba(var(--sc-shade), .5);
}

/* 4 · Chasis: aluminio anodizado índigo. De abajo hacia arriba en el fondo: el borde exterior fino (border-box, más
   claro y frío arriba a la derecha, oscuro lejos de la luz), la cara del marco, un oscurecimiento suave hacia abajo y
   la luz localizada en la esquina superior derecha. Un solo filo interior: el reflejo frío del borde superior. */
.lgn-chassis {
  inset: 0;
  border: 1px solid transparent;
  border-radius: var(--sc-radius);
  background:
    radial-gradient(38% 70% at 100% 0%, rgba(var(--sc-light), .3), rgba(var(--sc-light), 0) 72%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 30%, rgba(var(--sc-shade), .28) 100%) padding-box,
    linear-gradient(162deg, var(--sc-metal-hi) 0%, var(--sc-metal) 38%, var(--sc-metal-lo) 100%) padding-box,
    linear-gradient(205deg, rgba(var(--sc-light), .62) 0%, rgba(118, 134, 210, .4) 26%, rgba(52, 62, 128, .45) 60%, rgba(8, 11, 36, .95) 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(var(--sc-light), .24);
}

/* 5 · Bisel interior: anillo fino y uniforme, más oscuro que la pantalla, con un reflejo superior muy sutil. Va dentro
   del marco (no achica la pantalla) y antes de ella en el marcado: solo se ve el anillo. Su sombra interior inferior
   es la separación discreta entre bisel y vidrio. */
.lgn-bevel {
  inset: calc(var(--sc-bezel) - var(--sc-ring));
  border-radius: calc(var(--sc-screen-radius) + var(--sc-ring));
  background: var(--sc-bevel);
  box-shadow:
    inset 0 1px 0 rgba(var(--sc-light), .07),
    inset 0 -1px 1px rgba(0, 0, 0, .5);
}

/* 6 · Pantalla: la imagen y su proporción están en login-shot.css. Estas reglas solo la ubican sobre el bisel. */
.lgn-screen {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: var(--sc-screen-radius);
  background: #f4f6fb;
}
.lgn-device .lgn-shot {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* 7 · Filo del vidrio: una línea interior de 1 px, oscura y casi transparente, con un toque de sombra arriba (el vidrio
   hundido en el bisel). Sin degradados ni brillos sobre la agenda. */
.lgn-lens {
  z-index: 2;
  inset: var(--sc-bezel);
  border-radius: var(--sc-screen-radius);
  box-shadow:
    inset 0 0 0 1px rgba(var(--sc-shade), .22),
    inset 0 1px 2px rgba(var(--sc-shade), .14);
}

/* 901–1100 px (tableta horizontal): el panel es más angosto; el dispositivo, algo más chico respecto del alto. */
@media (max-width: 1100px) {
  .lgn-showcase { --sc-w: min(max(108cqw, 40rem), 240cqh); }
}

/* Ventanas de poco alto (1280 × 800, 1366 × 768, 1536 × 864…): el texto queda más cerca y llega más a la derecha respecto del
   equipo, cuyo borde superior sube hacia ese lado; baja un poco más para no tocar la última línea. */
@media (max-height: 880px) {
  .lgn-showcase { --sc-drop: .235; }
}

/* Bajo 900 px la marca es una cabecera: sin captura. */
@media (max-width: 900px) {
  .lgn-showcase { display: none; }
}