/* ============================================================
   Vitrina de dispositivos.

   Tres pantallas —escritorio, tableta y teléfono— con la interfaz
   dibujada por dentro. No son imágenes: es HTML y CSS, así que
   pesan casi nada, se ven nítidas en cualquier pantalla y se
   adaptan al modo claro y oscuro como el resto del sitio. Una
   captura de pantalla no hace nada de eso.

   Cada aparato se desplaza a distinta velocidad al bajar. Esa
   diferencia es lo que el ojo lee como profundidad — un parallax
   de verdad, no tres cosas moviéndose juntas.

   TODO EL INTERIOR VA EN `em`, y cada aparato fija su `font-size`.
   Así el mock entero escala cambiando un solo número, en vez de
   tener que retocar veinte medidas por cada tamaño de pantalla.
   ============================================================ */

.vitrina { overflow: hidden; }
.vitrina__intro { margin-bottom: var(--e4); }

/* ---------- el escenario ---------- */

.aparatos {
  position: relative;
  display: grid;
  gap: var(--e3);
  justify-items: center;
}

/* En teléfono y tableta van apilados: superponerlos en 400 px de
   ancho no luce, solo estorba. */
.disp { width: 100%; max-width: 30rem; }

@media (min-width: 1000px) {
  .aparatos {
    display: block;
    /* El alto sale de la proporción del escritorio (16:10 sobre el 64% del
       ancho) más el margen que necesitan la tableta y el teléfono para
       asomarse arriba y abajo sin salirse. */
    height: clamp(30rem, 46vw, 52rem);
  }
  .disp { position: absolute; max-width: none; }

  /* La composición: el escritorio manda y ocupa la izquierda; la tableta se
     asoma a su derecha, más arriba; el teléfono va delante, abajo, pisando
     la esquina del escritorio. Ninguno tapa la tabla ni las cifras del que
     tiene detrás — el traslape es de bordes, no de contenido. */
  .disp--escritorio { width: 63%; left: 0;      top: 8%;  z-index: 1; }
  .disp--tableta    { width: 26%; right: 1%;    top: 0;   z-index: 2; }
  .disp--telefono   { width: 13%; left: 55%;    bottom: 0; z-index: 3; }
}

@media (min-width: 1600px) {
  .disp--escritorio { width: 58%; left: 3%; }
  .disp--tableta    { width: 24%; right: 4%; }
  .disp--telefono   { width: 12%; left: 52%; }
}

/* Proporciones de aparato de verdad. Sin esto son rectángulos redondeados
   cuyo alto lo decide el contenido, y no se leen como un teléfono ni como
   una tableta. Con `overflow: hidden` lo que no cabe se recorta, que es
   justo lo que hace una pantalla real. */
@media (min-width: 1000px) {
  .disp--escritorio .pantalla { aspect-ratio: 16 / 10; }
  .disp--tableta    .pantalla { aspect-ratio: 3 / 4;   }
  .disp--telefono   .pantalla { aspect-ratio: 1 / 2.05; }
  .disp .pantalla > .ui { height: 100%; align-content: start; }
}

/* ---------- carcasas ---------- */

.pantalla {
  background: var(--superficie);
  border: 1px solid var(--borde);
  overflow: hidden;
  box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.35);
}

.disp--escritorio .pantalla { border-radius: 12px; font-size: clamp(5px, 0.72vw, 10px); }
.disp--tableta    .pantalla { border-radius: 18px; font-size: clamp(5px, 0.62vw, 9px);  }
.disp--telefono   .pantalla { border-radius: 22px; font-size: clamp(5px, 0.52vw, 8px);  }

@media (max-width: 999px) {
  .disp--escritorio .pantalla { font-size: clamp(6px, 1.8vw, 11px); }
  .disp--tableta    .pantalla { font-size: clamp(6px, 1.7vw, 11px); }
  .disp--telefono   .pantalla { font-size: clamp(7px, 2.4vw, 12px); }
}

/* Barra del navegador en el escritorio. */
.barra {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.9em 1.2em;
  background: var(--elevado);
  border-bottom: 1px solid var(--borde);
}
.barra i { width: 0.9em; height: 0.9em; border-radius: 999px; background: var(--borde); }
.barra span {
  margin-left: 0.8em; padding: 0.3em 1em; border-radius: 999px;
  background: var(--fondo); color: var(--tenue);
  font-size: 1em; font-style: normal;
}

/* Muesca del teléfono. */
.muesca {
  height: 1.6em; display: grid; place-items: center;
  background: var(--elevado); border-bottom: 1px solid var(--borde);
}
.muesca::after {
  content: ""; width: 32%; height: 0.55em; border-radius: 999px; background: var(--borde);
}

.pie-disp {
  text-align: center; font-size: var(--t-xs); color: var(--tenue);
  margin-top: 0.8rem;
}
@media (min-width: 1000px) { .pie-disp { text-align: left; } }

/* ---------- interfaz dibujada ---------- */

.ui { padding: 1.4em; display: grid; gap: 1.2em; font-variant-numeric: tabular-nums; }
.ui--con-riel { grid-template-columns: 7em 1fr; gap: 1.4em; padding: 1.2em; }

.riel { display: grid; gap: 0.7em; align-content: start; padding-right: 1em; border-right: 1px solid var(--borde); }
.riel b { font-size: 1.05em; letter-spacing: -0.02em; margin-bottom: 0.4em; color: var(--tinta); }
.riel u { text-decoration: none; color: var(--tenue); font-size: 0.95em; padding: 0.35em 0.6em; border-radius: 0.5em; }
.riel u.on { background: var(--suave); color: var(--acento); font-weight: 650; }

.ui__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.ui__titulo { font-size: 1.5em; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); }
.ui__mes { font-size: 0.95em; color: var(--tenue); }

/* Fichas de cifras */
.fichas { display: grid; gap: 0.8em; grid-template-columns: repeat(2, 1fr); }
.fichas--4 { grid-template-columns: repeat(4, 1fr); }
.ficha { background: var(--elevado); border-radius: 0.7em; padding: 0.9em; }
.ficha em { display: block; font-style: normal; font-size: 0.9em; color: var(--tenue); margin-bottom: 0.3em; }
.ficha b { display: block; font-size: 1.45em; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); }
.ficha b.bien { color: var(--acento); }
.ficha b.mal  { color: var(--alerta); }

/* Barras del pulso */
.pulso { display: grid; gap: 0.6em; }
.pulso__fila { display: grid; gap: 0.3em; }
.pulso__fila em { font-style: normal; font-size: 0.9em; color: var(--tenue); display: flex; justify-content: space-between; }
.pulso__via { height: 0.55em; border-radius: 999px; background: var(--elevado); overflow: hidden; }
.pulso__va { height: 100%; border-radius: 999px; background: var(--acento); }
.pulso__va--alerta { background: var(--alerta); }

/* Los anchos van como clase, no como `style=""` en el HTML. Un solo estilo en
   línea obligaría a abrirle la mano a la CSP con 'unsafe-inline', y esa
   concesión no se hace por dibujar dos barras. */
.va-63 { width: 63%; }
.va-71 { width: 71%; }

/* Alturas de la gráfica de barras, por la misma razón. */
.grafica i:nth-child(1)  { height: 42%; }
.grafica i:nth-child(2)  { height: 58%; }
.grafica i:nth-child(3)  { height: 51%; }
.grafica i:nth-child(4)  { height: 67%; }
.grafica i:nth-child(5)  { height: 45%; }
.grafica i:nth-child(6)  { height: 72%; }
.grafica i:nth-child(7)  { height: 61%; }
.grafica i:nth-child(8)  { height: 80%; }
.grafica i:nth-child(9)  { height: 55%; }
.grafica i:nth-child(10) { height: 69%; }
.grafica i:nth-child(11) { height: 63%; }
.grafica i:nth-child(12) { height: 88%; }

/* Gráfica de barras */
.grafica { display: flex; align-items: flex-end; gap: 0.45em; height: 7em; }
/* `--suave` sobre `--superficie` en modo oscuro son casi el mismo color: las
   barras desaparecían. Se mezcla con el acento para que se distingan en los
   dos temas sin gritar. */
.grafica i {
  flex: 1; border-radius: 0.25em 0.25em 0 0;
  background: color-mix(in oklab, var(--acento) 38%, var(--elevado));
}
.grafica i.act { background: var(--acento); }

/* Tabla */
.tabla { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.tabla th {
  text-align: left; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tenue); font-weight: 650; padding: 0.5em 0.4em; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 0.55em 0.4em; border-bottom: 1px solid var(--borde); color: var(--tinta); }
.tabla td.num { text-align: right; }
.tabla td.baja { color: var(--tenue); }
.tabla tr:last-child td { border-bottom: 0; }

/* Lista de movimientos */
.movs { display: grid; gap: 0.55em; }
.mov { display: grid; grid-template-columns: 1.7em 1fr auto; gap: 0.7em; align-items: center; }
.mov i { width: 1.7em; height: 1.7em; border-radius: 0.5em; background: var(--suave); }
.mov em { font-style: normal; display: grid; }
.mov em b { font-weight: 600; font-size: 1em; color: var(--tinta); }
.mov em u { text-decoration: none; font-size: 0.85em; color: var(--tenue); }
.mov span { font-weight: 650; color: var(--tinta); }

/* El corte de la tarjeta, dentro del mock */
.corte { background: var(--elevado); border-radius: 0.7em; padding: 1em; display: grid; gap: 0.55em; }
.corte__t { font-size: 0.9em; color: var(--tenue); }
.corte__f { display: flex; justify-content: space-between; font-size: 1em; color: var(--tinta); }
.corte__f.total { border-top: 1px solid var(--borde); padding-top: 0.55em; font-weight: 700; }
.corte__f.total span { color: var(--alerta); }

/* ---------- profundidad ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
    /* Cada aparato a su velocidad. Ahí está el efecto. */
    .disp--escritorio { animation: flotar-lento  linear both; animation-timeline: view(); animation-range: cover; }
    .disp--tableta    { animation: flotar-medio  linear both; animation-timeline: view(); animation-range: cover; }
    .disp--telefono   { animation: flotar-rapido linear both; animation-timeline: view(); animation-range: cover; }

    @keyframes flotar-lento  { from { transform: translateY(3rem);   } to { transform: translateY(-2rem); } }
    @keyframes flotar-medio  { from { transform: translateY(7rem);   } to { transform: translateY(-5rem); } }
    @keyframes flotar-rapido { from { transform: translateY(11rem);  } to { transform: translateY(-8rem); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .disp { animation: none !important; transform: none !important; }
}