/* ============================================================
   Recurso 08 · La rutina post-clase
   Solo para /rutina/. Se apoya en medfocus.v6.css.
   ============================================================ */

/* ---------- la tarde de un vistazo (línea de tiempo) ---------- */
.tarde{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 22px 8px;margin:0 0 14px}
@media(max-width:520px){.tarde{padding:17px 15px 6px}}
.tarde > .lbl{display:block;margin-bottom:12px}
.linea{list-style:none;margin:0;padding:0}
.linea li{position:relative}
.linea a{display:grid;grid-template-columns:62px 16px 1fr;gap:0 12px;align-items:start;
  text-decoration:none;color:inherit;padding:0 0 16px;border-radius:8px}
.linea a:hover .q{color:var(--brand-deep)}
.linea .h{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;
  color:var(--ink-2);text-align:right;padding-top:1px;white-space:nowrap}
.linea .p{position:relative;height:100%;display:flex;justify-content:center}
.linea .p::before{content:"";width:11px;height:11px;border-radius:50%;margin-top:5px;
  background:var(--card);border:2px solid var(--brand);position:relative;z-index:1}
.linea .p::after{content:"";position:absolute;top:14px;bottom:-6px;width:2px;
  background:var(--rule-2)}
.linea li:last-child .p::after{display:none}
.linea li.fin .p::before{background:var(--brand)}
.linea .q{display:block;font-weight:600;font-size:15.5px;line-height:1.3}
.linea .d{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.linea .dur{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
  color:var(--brand-deep);background:var(--brand-wash);border-radius:100px;padding:1px 7px;
  margin-left:6px;white-space:nowrap;font-weight:500;vertical-align:1px}
@media(max-width:420px){
  .linea a{grid-template-columns:50px 14px 1fr;gap:0 9px}
  .linea .h{font-size:11.5px}
  .linea .dur{display:inline-block;margin:3px 0 0}
}
.tarde .ajuste{font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--rule);
  padding:12px 0 12px;margin:2px 0 0}

/* ---------- descarga de la hoja imprimible ---------- */
.descarga{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit;
  border:2px dashed var(--brand);border-radius:var(--r);padding:16px 18px;margin:0 0 34px;
  background:var(--brand-wash);transition:transform .14s ease}
.descarga:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.descarga{transition:none}}
.descarga .ico{flex:none;width:44px;height:44px;border-radius:10px;background:var(--brand);
  color:#fff;display:flex;align-items:center;justify-content:center}
.descarga .txt{flex:1;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.descarga .txt b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px}
.descarga .fl{flex:none;color:var(--brand-deep);font-weight:600;font-size:14px}
@media(max-width:420px){.descarga .fl{display:none}}

/* ---------- por qué funciona (respaldo) ---------- */
.porque{border-top:1px dashed var(--rule-2);margin-top:20px;padding-top:14px}
.porque > .lbl{display:block;margin-bottom:6px;color:var(--ok)}
.porque p{font-size:14.5px;margin:0;color:var(--ink-2)}
.porque p b{color:var(--ink)}
.porque sup a{text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:11px;
  font-weight:600;color:var(--brand-deep)}

/* ---------- versión día pesado ---------- */
.minimo{border:2px solid var(--brand);border-radius:var(--r);padding:20px 22px;margin:0 0 22px;
  background:var(--card)}
@media(max-width:520px){.minimo{padding:17px 16px}}
.minimo h3{font-size:clamp(20px,5vw,23px);letter-spacing:-.02em;margin:6px 0 8px}
.minimo > p{color:var(--ink-2);font-size:15px}
.minimo ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.minimo li{display:flex;gap:11px;align-items:flex-start;background:var(--sunk);
  border-radius:8px;padding:10px 12px;font-size:14.5px;line-height:1.45}
.minimo li .ck{flex:none;width:18px;height:18px;border:2px solid var(--brand);border-radius:5px;
  margin-top:2px}
.minimo li b{color:var(--ink)}
.minimo .guardia{margin:14px 0 0;font-size:14px;color:var(--ink-2)}

/* ---------- fuentes ---------- */
.fuentes{margin:30px 0 0;padding:20px 22px;border:1px solid var(--rule);border-radius:var(--r)}
.fuentes h3{font-size:18px;margin-bottom:10px}
.fuentes ol{margin:0;padding-left:20px;font-size:13.5px;color:var(--ink-2)}
.fuentes li{margin-bottom:8px;scroll-margin-top:20px}
.fuentes li:target{color:var(--ink)}
.fuentes a{word-break:break-word}