/* Summit College · paginas/modelo-educativo.css
   Solo lo propio de /modelo-educativo/: la barra apilada 50/20/30 de la jornada,
   la muestra de color que enlaza cada tarjeta con su segmento y la lista de
   medios de evaluación. Tarjetas, retícula, pastillas (.valores) y espacio A/B
   viven en base.css. Sin colores propios: todo por var(--...). */

/* Barra apilada 50/20/30. Es decorativa (aria-hidden en el HTML): las tres
   tarjetas de debajo llevan las mismas cifras y el texto aprobado. Cada
   segmento mide su porcentaje exacto (flex-basis) y lleva la cifra dentro,
   legible sin color. Verde, dorado y crema: tres temperaturas, no tres tonos. */
.jornada-barra { display: flex; min-height: 3.25rem; margin: 0 0 var(--space-5); border: 1px solid var(--color-brand); border-radius: var(--radius-card); overflow: hidden; }
.jornada-seg { display: grid; place-items: center; flex: 0 0 auto; min-width: 0; padding: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: 1; white-space: nowrap; }
.jornada-seg + .jornada-seg { border-left: 1px solid var(--color-brand); }
.jornada-seg[data-parte="50"] { flex-basis: 50%; background: var(--color-brand); color: var(--color-on-brand); }
.jornada-seg[data-parte="20"] { flex-basis: 20%; background: var(--color-accent); color: var(--color-brand); }
.jornada-seg[data-parte="30"] { flex-basis: 30%; background: var(--color-bg); color: var(--color-brand); }

/* Tarjetas-leyenda: una muestra de color delante de cada título repite el
   color del segmento correspondiente. */
.jornada-partes { list-style: none; margin: 0; padding: 0; }
.jornada-partes h3::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.5em; border: 1px solid var(--color-brand); border-radius: 3px; vertical-align: -0.05em; }
.jornada-partes [data-parte="50"] h3::before { background: var(--color-brand); }
.jornada-partes [data-parte="20"] h3::before { background: var(--color-accent); }
.jornada-partes [data-parte="30"] h3::before { background: var(--color-bg); }

/* Cómo evaluamos: los cinco medios de evaluación entre los dos párrafos, con
   las pastillas de .valores. El orden de lectura (cómo se evalúa → qué se
   sustituye) es una sola columna y no cambia con el ancho. */
.medios { margin-bottom: var(--space-5); }
.evaluacion > :last-child { margin-bottom: 0; }