/* Así es una sesión (#sesion). A la izquierda, el reloj y la barra de 3 horas: cinco bloques, cada uno del ancho de
   sus minutos (Arranque 10 · Bloque 1 70 · Descanso 15–20 · Bloque 2 70 · Cierre 10). En escritorio, los bloques
   cortos llevan su nombre encima y los largos debajo (subgrid con las columnas de la barra); en móvil, la lista va
   debajo con su muestra de color. A la derecha, los datos. Fondo: lo pone base.css (data-tone="ink").
   Rojo = la IA en directo (Bloque 1). Verde = la práctica de cada persona (Bloque 2). */

#sesion {
  --ses-cols: minmax(0, 10fr) minmax(0, 70fr) minmax(0, 17.5fr) minmax(0, 70fr) minmax(0, 10fr);
  --ses-gap: 4px;
  --ses-h: 76px;
  --ses-edge: rgba(238, 240, 247, 0.1);
  --ses-ai: rgba(239, 58, 29, 0.24);
  --ses-ai-line: rgba(239, 58, 29, 0.6);
  --ses-human: rgba(125, 219, 140, 0.2);
  --ses-human-line: rgba(125, 219, 140, 0.55);
  --ses-pause: rgba(238, 240, 247, 0.04);
}

/* ---------- Cabecera ---------- */
#sesion .ses-head { display: grid; gap: clamp(10px, 1.4vw, 16px); margin-bottom: clamp(28px, 3.6vw, 48px); }
#sesion .ses-lead { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

#sesion .ses-body { display: grid; gap: clamp(36px, 4.4vw, 56px); }

/* ---------- Reloj: cuenta mientras se llena la barra ---------- */
#sesion .ses-clock { display: flex; align-items: baseline; gap: 10px; margin-bottom: clamp(14px, 1.8vw, 22px); }
#sesion .ses-clock-n {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4rem);
  line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
#sesion .ses-clock-k { font-size: 1rem; font-weight: 500; color: var(--text-2); }

/* ---------- Barra ---------- */
#sesion .ses-bar { display: grid; grid-template-columns: var(--ses-cols); column-gap: var(--ses-gap); height: var(--ses-h); }
#sesion .ses-blk { position: relative; display: grid; place-items: center; min-width: 0; }
#sesion .ses-fill {
  position: absolute; inset: 0; border-radius: 10px;
  background-color: var(--ses-edge); border: 1px solid rgba(238, 240, 247, 0.14);
}
#sesion .ses-blk.is-ai .ses-fill { background-color: var(--ses-ai); border-color: var(--ses-ai-line); }
#sesion .ses-blk.is-human .ses-fill { background-color: var(--ses-human); border-color: var(--ses-human-line); }
#sesion .ses-blk.is-pause .ses-fill {
  background-color: var(--ses-pause); border: 1px dashed rgba(238, 240, 247, 0.22);
  background-image: repeating-linear-gradient(-45deg, rgba(238, 240, 247, 0.07) 0 2px, transparent 2px 9px);
}
#sesion .ses-min {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.25rem);
  letter-spacing: -0.01em; white-space: nowrap; color: var(--text);
}
#sesion .ses-blk.is-edge .ses-min, #sesion .ses-blk.is-pause .ses-min { font-size: 0.875rem; color: var(--text-2); }
/* El polvo de cada bloque (lo pone sesion.js): sobresale del bloque y no coge clics. */
#sesion .ses-dust { position: absolute; inset: -18px -14px; width: calc(100% + 28px); height: calc(100% + 36px); pointer-events: none; z-index: 2; }

/* ---------- Lista de bloques ---------- */
#sesion .ses-leg { font-size: 0.9375rem; line-height: 1.35; color: var(--text-2); }
#sesion .ses-leg b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text); }
#sesion .ses-leg-m { white-space: nowrap; }
#sesion .ses-leg-d { display: block; margin-top: 2px; color: var(--text); }
#sesion .ses-sw { display: none; }

#sesion .ses-note { display: flex; align-items: center; gap: 10px; margin-top: clamp(20px, 2.4vw, 28px); font-size: 0.9375rem; color: var(--text-2); }
#sesion .ses-note-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--human); }

/* ---------- Datos ---------- */
#sesion .ses-fact { display: grid; align-content: start; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
#sesion .ses-fact:last-child { border-bottom: 1px solid var(--line); }
#sesion .ses-fact dt { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; }
#sesion .ses-fact dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
/* «Míralo con tu nombre» lleva al certificado: subrayado siempre, para que se vea que es un enlace. */
#sesion .ses-fact .link { color: var(--text); background-size: 100% 1px; }

/* ---------- Escritorio y tableta ancha: nombres encima (bloques cortos) y debajo (bloques largos) ---------- */
@media (min-width: 768px) {
  #sesion .ses-tl {
    display: grid; grid-template-columns: var(--ses-cols); column-gap: var(--ses-gap);
    grid-template-rows: auto var(--ses-h) auto; row-gap: 12px;
  }
  #sesion .ses-bar { grid-row: 2; grid-column: 1 / -1; grid-template-columns: subgrid; }
  #sesion .ses-legend { grid-row: 1 / -1; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  #sesion .ses-leg { min-width: 0; }
  #sesion .ses-leg:nth-child(1) { grid-column: 1; }
  #sesion .ses-leg:nth-child(2) { grid-column: 2; }
  #sesion .ses-leg:nth-child(3) { grid-column: 3; }
  #sesion .ses-leg:nth-child(4) { grid-column: 4; }
  #sesion .ses-leg:nth-child(5) { grid-column: 5; }
  #sesion .ses-leg.is-top { grid-row: 1; align-self: end; justify-self: start; width: max-content; }
  #sesion .ses-leg.is-pause { justify-self: center; text-align: center; }
  #sesion .ses-leg.is-end { justify-self: end; text-align: right; }
  #sesion .ses-leg.is-bottom { grid-row: 3; padding-left: 2px; }
  /* Los nombres de arriba, con una raya fina que baja hasta su bloque. */
  #sesion .ses-leg.is-top { position: relative; padding-bottom: 8px; }
  #sesion .ses-leg.is-top::after { content: ""; position: absolute; bottom: -6px; left: 12px; width: 1px; height: 10px; background: var(--line-2); }
  #sesion .ses-leg.is-pause::after { left: 50%; }
  #sesion .ses-leg.is-end::after { left: auto; right: 12px; }
}

@media (min-width: 1024px) {
  #sesion .ses-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  #sesion .ses-facts { margin-top: 6px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #sesion .ses-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  #sesion .ses-fact:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Móvil: barra fina y la lista debajo, con su muestra de color ---------- */
@media (max-width: 767px) {
  #sesion { --ses-h: 52px; --ses-gap: 3px; }
  #sesion .ses-fill { border-radius: 7px; }
  #sesion .ses-blk.is-edge .ses-min, #sesion .ses-blk.is-pause .ses-min { display: none; }
  #sesion .ses-legend { display: grid; gap: 12px; margin-top: 18px; }
  #sesion .ses-leg { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
  #sesion .ses-leg-m { justify-self: end; }
  #sesion .ses-leg-d { grid-column: 2 / -1; margin-top: 0; }
  #sesion .ses-sw { display: block; width: 14px; height: 14px; border-radius: 4px; align-self: center; background: var(--ses-edge); box-shadow: inset 0 0 0 1px rgba(238, 240, 247, 0.18); }
  #sesion .ses-leg.is-ai .ses-sw { background: var(--ses-ai); box-shadow: inset 0 0 0 1px var(--ses-ai-line); }
  #sesion .ses-leg.is-human .ses-sw { background: var(--ses-human); box-shadow: inset 0 0 0 1px var(--ses-human-line); }
  #sesion .ses-leg.is-pause .ses-sw { background: var(--ses-pause); box-shadow: inset 0 0 0 1px rgba(238, 240, 247, 0.22); }
  #sesion .ses-dust { inset: -14px -8px; width: calc(100% + 16px); height: calc(100% + 28px); }
}