/* =====================================================================
   Piezas de La Reunión de Diálogo (turno B): grabación como eje,
   Cómo se llegó (camino) y V41 (casos expuestos).
   Solo tokens de sitio.css: ninguna regla propia de tema.
   ===================================================================== */

/* ---------- Formas de marca (leyenda y botones de la grabación) ---------- */
.forma { display: inline-block; width: 9px; height: 9px; background: var(--tinta); flex: none; }
.forma[data-forma="rombo"] { transform: rotate(45deg); width: 7px; height: 7px; margin: 0 2px; }
.forma[data-forma="hueco"] { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--tinta); }

/* ---------- 1 · La grabación como eje ---------- */
.grabacion { display: grid; gap: var(--e-4); }
.grabacion__cabeza { display: grid; gap: var(--e-2); }
.grabacion__cabeza .fuente { margin: 0; }
.grabacion__leyenda { margin: 0; }
.grabacion blockquote { margin: 0; }
.grabacion blockquote p { margin: 0; max-width: none; }

.regla { position: relative; }
.regla__area { position: relative; height: 40px; margin: 0 12px; }
.regla__barra { position: absolute; left: 0; right: 0; background: var(--papel-2); border: 1px solid var(--linea); border-radius: 3px; }
.regla__tic { position: absolute; width: 1px; height: 6px; background: var(--linea-fuerte); }
.regla__marca {
  position: absolute; z-index: 2; width: 24px; height: 24px; margin-left: -12px; padding: 0;
  border: 0; border-radius: var(--radio); background: none; cursor: pointer;
}
.regla__marca::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: var(--tinta);
}
.regla__marca[data-forma="rombo"]::before { transform: rotate(45deg); }
.regla__marca[data-forma="hueco"]::before { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--tinta); }
.regla__marca.activa::before { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.regla__marca:focus-visible { outline-offset: 2px; }
.regla__marca.activa[data-forma="hueco"]::before { box-shadow: inset 0 0 0 2px var(--tinta); }
.regla__marca::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px;
  height: var(--tallo, 0px); background: var(--linea-fuerte);
}
.regla__ejes { position: relative; height: 22px; margin: 6px 12px 0; font: 500 var(--t-dato)/1 var(--sans); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.regla__eje { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.regla__eje--ini { transform: none; }
.regla__eje--fin { transform: translateX(-100%); color: var(--tinta); font-weight: 650; }

.grabacion__cita { min-height: 0; }
.grabacion .cita-tiempo { border-left-color: var(--tinta); max-width: var(--medida); }
.grabacion .cita-tiempo.activa { background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--tinta); }
.grabacion .marca-tiempo { align-self: flex-start; }
.grabacion__citas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); max-width: var(--medida); }
.grabacion__citas li { scroll-margin-top: calc(var(--alto-cabecera) + var(--e-4)); }
/* Desde 1100 px, dos columnas de lectura que llenan su hueco (sin filas con medio vacío) */
@media (min-width: 1100px) {
  .grabacion__citas { display: block; columns: 2; column-gap: var(--e-4); max-width: none; }
  .grabacion__citas li { break-inside: avoid; margin: 0 0 var(--e-3); }
  .grabacion .cita-tiempo { max-width: none; }
}
.grabacion__estado { margin: 0; color: var(--tinta-2); font-size: .95rem; }
.grabacion__citas .cita-tiempo { margin: 0; }
.cita-tiempo__quien { font-weight: 650; color: var(--tinta); }
.grabacion__aviso { max-width: var(--medida); margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .grabacion__cita .cita-tiempo { animation: cita-entra .15s ease both; }
  @keyframes cita-entra { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- 2 · Cómo se llegó (calendario en carriles) ---------- */
.camino__malla { list-style: none; margin: 0; padding: 0; display: grid; }
.camino__rot { display: none; }
.dia { list-style: none; margin: 0 0 var(--e-5); }
.dia__cabeza { margin: 0 0 var(--e-2); font: 650 .98rem/1.2 var(--sans); padding-bottom: .3rem; border-bottom: 2px solid var(--tinta); }
.dia__sem { font-weight: 500; color: var(--tinta-2); font-size: .8rem; }
.dia--vacio { margin-bottom: var(--e-3); }
.dia--vacio .dia__cabeza { border-bottom-color: var(--linea-fuerte); color: var(--tinta-2); font-weight: 500; }
.carril { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); align-content: start; }
.carril + .carril { margin-top: var(--e-2); }
.carril:empty { display: none; }
.hito {
  margin: 0; padding: .5rem .6rem; display: grid; gap: .3rem;
  background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: 2px;
  font-size: .84rem; line-height: 1.4;
}
.hito--ea { border-left: 3px solid var(--tinta); }
.hito p { margin: 0; max-width: none; }
.hito__cabeza { display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: center; }
.carril-chip {
  font: 650 .75rem/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-2); border: 1px solid var(--linea-fuerte); border-radius: 2px; padding: .05rem .4rem;
}
.reunion {
  display: grid; gap: .25rem; align-content: center; padding: .75rem .8rem; border-radius: 2px;
  background: var(--tinta); color: var(--papel); margin-bottom: var(--e-2);
}
.reunion p { margin: 0; max-width: none; }
.reunion__fecha { font: 650 .8rem/1.3 var(--sans); letter-spacing: .03em; }
.reunion__titulo { font: 700 1.1rem/1.2 var(--serif); }
.reunion__texto { font-size: .84rem; line-height: 1.4; }
.camino__despues { margin-top: var(--e-5); display: grid; gap: var(--e-2); max-width: 46ch; }
.camino__despues .antetitulo { margin: 0; }

.camino { min-width: 0; }
.camino:focus-visible { outline-offset: 4px; }
.hito, .carril, .dia { min-width: 0; }
.hito .oficio { white-space: nowrap; font-size: .75rem; padding: 0 .3rem; }
@media (min-width: 1024px) {
  .camino { overflow-x: auto; padding-bottom: var(--e-2); }
  .camino__malla {
    grid-template-columns: 96px var(--pesos, repeat(9, minmax(0, 1fr)));
    grid-template-rows: auto auto auto;
    column-gap: 6px;
    min-width: 1180px;
  }
  .hito { font-size: .8125rem; padding: .45rem .4rem; align-self: start; }
  .carril + .carril { margin-top: 0; }
  .camino__rot {
    display: block; grid-column: 1; list-style: none; margin: 0; padding: .5rem .25rem 0 0;
    font: 650 .75rem/1.25 var(--sans); color: var(--tinta-2); overflow-wrap: normal;
  }
  .camino__rot--vd { grid-row: 2; }
  .camino__rot--rep { grid-row: 3; }
  .dia { grid-column: var(--col); grid-row: 1 / 4; display: grid; grid-template-rows: subgrid; align-content: start; margin: 0; }
  .dia__cabeza { grid-row: 1; }
  .dia .carril--vd { grid-row: 2; }
  .dia .carril--rep { grid-row: 3; }
  .dia .reunion { grid-row: 2 / 4; margin: 0; }
  .dia--vacio { margin: 0; }
  .carril { gap: 6px; }
  .carril-chip {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .camino__despues { margin-top: var(--e-6); }
}

/* ---------- 3 · V41: casos expuestos ---------- */
.v41 {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--e-3) var(--e-2);
}
@media (min-width: 1024px) {
  .v41 { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: var(--e-2) 6px; }
}
.v41__item { margin: 0; }
.v41__caso { display: grid; justify-items: center; gap: 6px; color: var(--tinta); text-decoration: none; }
.v41__caso:hover .v41__c { outline: 2px solid var(--tinta); outline-offset: 3px; }
.v41__c {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--radio-casilla); font: 600 .95rem/1 var(--mono); font-variant-numeric: tabular-nums;
}
.v41__c--expuesto { background: var(--docentes); color: var(--banda-texto); }
.v41__c--no { background: var(--superficie); color: var(--tinta-2); border: 1.5px dashed var(--tinta-2); }
.v41__estado { display: grid; justify-items: center; gap: 1px; font: 600 .78rem/1.25 var(--sans); color: var(--tinta-2); text-align: center; }
.v41__icono { font-size: .9rem; line-height: 1; color: var(--tinta); }
.v41__caso--no .v41__estado { color: var(--tinta); }
/* Bajo cada teja solo queda el icono (✓ expuesto, ○ sin exponer); el estado en palabras va al nombre accesible y a la leyenda */
.v41__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v41__c { max-width: 56px; justify-self: center; }