/* Mi rutina — la pantalla de la paciente del Protocol Engine 2.0.
 *
 * Se apoya en plan.css (portada, firma) y en los tokens del portal. Lo propio
 * es la sesión: una tarjeta con la hora grande a la izquierda y la foto del
 * aparato, porque lo que la paciente mira al abrir es "a qué hora" y "qué
 * aparato", en ese orden. El HOY va destacado con el color de marca; el resto
 * de días, en gris; cada semana lleva su tira de siete días.
 *
 * Rediseño del 11-sep-2026 (Paul: "la visual tiene que ser bella"): más aire,
 * una barra de avance, la foto del aparato, emojis como anclas, y el botón
 * "Ya la hice" como acción primaria de verdad. Todo con los tokens --kctp-*. */

.mp-hoja { max-width: 760px; margin: 0 auto; }
.mp-portada { margin-bottom: 28px; }
.mp-emoji { font-size: .9em; margin-right: .1em; }

/* ---------------------------------------------------------- resumen */
.mp-resumen { margin: 0 0 var(--kctp-e5, 24px); }
.mp-resumen .mp-firma { margin-top: 0; }
.mp-progreso {
    position: relative; height: 10px; margin-top: 10px; border-radius: 999px;
    background: var(--kctp-panel, #f5edef); overflow: hidden;
}
.mp-progreso > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--kctp-acento, #5b0c2f);
    transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.mp-progreso > small {
    position: absolute; right: 0; top: -20px;
    font-size: var(--kctp-t-micro, .8125rem); color: var(--kctp-guia, #67555d); font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- hoy */
.mp-hoy {
    padding: 20px 20px 18px; margin-bottom: var(--kctp-e6, 32px);
    border-radius: var(--kctp-radio-ch, 12px);
    background: var(--kctp-blanco, #fff);
    border: 1px solid var(--kctp-borde-c, #e3d5da);
    box-shadow: var(--kctp-sombra, 0 1px 2px rgba(38, 5, 20, .05), 0 8px 30px -6px rgba(38, 5, 20, .08));
}
.mp-hoy > h2 {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
    font-family: var(--kctp-serif, "Noto Serif Display", Georgia, serif); font-weight: var(--kctp-peso-normal, 400);
    font-size: var(--kctp-t-titulo, 1.5rem); letter-spacing: var(--kctp-ls-titulo, -.022em);
    color: var(--kctp-tinto, #260514);
}
.mp-hoy > h2 i {
    display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--kctp-acento-sw, #f5edef); color: var(--kctp-acento, #5b0c2f); font-size: 1.05rem;
}
.mp-libre { display: flex; gap: 14px; align-items: flex-start; padding: 6px 2px; }
.mp-libre-emoji, .mp-espera-emoji {
    flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--kctp-crema, #f9f4f5); font-size: 1.5rem;
}
.mp-libre strong { display: block; font-size: var(--kctp-t-cuerpo, 1.1875rem); color: var(--kctp-tinto, #260514); }
.mp-libre span { display: block; font-size: var(--kctp-t-menor, 1.0625rem); color: var(--kctp-guia, #67555d); margin-top: 2px; }
.mp-espera { display: flex; gap: 14px; align-items: flex-start; }
.mp-espera p { margin: 6px 0 0; }

/* -------------------------------------------- lo que le cambiaron (21-sep-2026)
   Va lo primero de la rutina y con el color de acento: es lo unico de esta
   pantalla que ella todavia no sabe. No se esconde al leerlo --el dia 4 ya no
   se acuerda-- y se va solo cuando el medico publique otra version. */
.mp-cambio {
    display: flex; gap: 14px; align-items: flex-start;
    margin: 0 0 18px; padding: 14px 16px;
    border-radius: var(--kctp-radio-ch, 12px);
    background: var(--kctp-crema, #f9f4f5);
    border: 1px solid var(--kctp-borde-c, #e3d5da);
    border-left: 3px solid var(--kctp-acento, #5b0c2f);
}
.mp-cambio-emoji {
    flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 50%; background: var(--kctp-blanco, #fff); font-size: 1.25rem;
}
.mp-cambio strong { display: block; color: var(--kctp-tinto, #260514); }
.mp-cambio-que   { margin: 4px 0 0; color: var(--kctp-tinta, #2a1a21); }
.mp-cambio-quien {
    margin: 6px 0 0; font-size: var(--kctp-t-menor, 1.0625rem);
    color: var(--kctp-guia, #67555d);
}

/* ----------------------------------------------------------- sesión */
.mp-sesion {
    padding: 14px 16px; margin-top: 10px; border-radius: var(--kctp-radio-ch, 12px);
    background: var(--kctp-crema, #f9f4f5); border: 1px solid var(--kctp-borde, #ebe1e4);
}
.mp-hoy .mp-sesion.grande { background: var(--kctp-blanco, #fff); border-color: var(--kctp-borde-c, #e3d5da); padding: 16px 18px; }
.mp-sesion.mp-ej-EXECUTED { background: var(--kctp-ok-sw, #e9f5f0); border-color: var(--kctp-ok-bd, #c8e6da); }
.mp-sesion.mp-ej-OMITTED  { opacity: .7; }
.mp-sesion-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mp-hora {
    font-family: var(--kctp-sans, Inter, system-ui, sans-serif); font-size: 1.35rem; font-weight: 600;
    color: var(--kctp-acento, #5b0c2f); font-variant-numeric: tabular-nums; min-width: 60px; letter-spacing: -.02em;
}
.mp-foto {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
    background: var(--kctp-blanco, #fff); border: 1px solid var(--kctp-borde, #ebe1e4);
    display: grid; place-items: center;
}
.mp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-foto-emoji { font-size: 1.6rem; }
.mp-sesion-que { flex: 1; min-width: 160px; }
.mp-sesion-que strong { display: block; font-size: var(--kctp-t-cuerpo, 1.1875rem); color: var(--kctp-tinto, #260514); }
.mp-sesion-que span { font-size: var(--kctp-t-meta, .95rem); color: var(--kctp-guia, #67555d); }
.mp-sesion-que b { color: var(--kctp-tinta, #2a1a21); font-weight: 600; }
.mp-marca {
    font-size: var(--kctp-t-micro, .8125rem); font-weight: 600; padding: 4px 12px; border-radius: 100px;
    background: var(--kctp-panel, #f5edef); color: var(--kctp-guia, #67555d);
}
.mp-marca.EXECUTED { background: var(--kctp-ok, #1f7a58); color: #fff; }
.mp-necesitas { margin: 10px 0 0; font-size: var(--kctp-t-meta, .95rem); color: var(--kctp-guia, #67555d); }
.mp-necesitas i { margin-right: 4px; }

/* CÓMO SE USA CADA PRODUCTO (Paul, 17-sep-2026). Va justo debajo de "Ten a
 * mano", que es donde ya está mirando: primero qué necesita, y a renglón
 * seguido qué hace con ello. Sangrado y en letra de apoyo, porque lo que manda
 * en la tarjeta sigue siendo el aparato y sus minutos. */
.mp-comousar {
    margin: 6px 0 0;
    padding-left: 1.1rem;
    list-style: none;
    font-size: var(--kctp-t-meta, .95rem);
    color: var(--kctp-guia, #67555d);
    line-height: 1.45;
}
.mp-comousar li { margin-top: 4px; position: relative; }
.mp-comousar li::before {
    content: "·";
    position: absolute;
    left: -.8rem;
    font-weight: 700;
}
.mp-comousar b { color: var(--kctp-tinta, #2a1a21); font-weight: 600; }
.mp-pasos { margin: 10px 0 0; padding-left: 20px; font-size: var(--kctp-t-menor, 1.0625rem); }
.mp-pasos li { margin: 4px 0; }
.mp-pasos li span { display: block; color: var(--kctp-guia, #67555d); font-size: var(--kctp-t-meta, .95rem); }
/* ------------------------------------------------------------------ *
 *  MAQUETA A · LA SESION GUIADA
 *
 *  Tres fases --antes, durante, despues-- y tres avisos. El texto sale del
 *  catalogo de modos, aprobado una vez, no de lo que la IA escriba hoy.
 *
 *  En el telefono las fases van una debajo de otra: son parrafos para leer
 *  con el aparato en la mano, no columnas para comparar.
 * ------------------------------------------------------------------ */
.mp-guia { margin: 14px 0 0; }
.mp-fases { display: grid; gap: 10px; }
@media (min-width: 760px) { .mp-fases { grid-template-columns: repeat(3, 1fr); } }
.mp-fase {
    background: var(--kctp-panel, #f5edef);
    border-radius: var(--kctp-radio-ch, 12px);
    padding: 12px 14px 13px;
    position: relative;
}
.mp-fase small {
    display: block; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    font-size: var(--kctp-t-micro, .8125rem); color: var(--kctp-acento, #8c2f52);
    margin-bottom: 5px;
}
.mp-fase-t {
    position: absolute; top: 11px; right: 13px;
    font-size: var(--kctp-t-micro, .8125rem); font-weight: 600;
    color: var(--kctp-guia, #67555d); font-variant-numeric: tabular-nums;
}
.mp-fase p { margin: 0; font-size: var(--kctp-t-menor, 1.0625rem); line-height: 1.5; color: var(--kctp-tinta, #2a1a21); }
/* PASOS_UNO_A_UNO (5-oct-2026): lo que escribió su médico, debajo de la guía y con la misma letra. */
.mp-del-medico { margin: .5rem 0 0; padding-left: 1.1rem; font-size: var(--kctp-t-menor, 1.0625rem); line-height: 1.5; color: var(--kctp-tinta, #2a1a21); }
.mp-del-medico li + li { margin-top: .25rem; }

/* SIN FLEX, a proposito. Con flex el rotulo ("Ten a mano:") era una columna
   propia y se partia en dos lineas en el telefono. Aqui el emoji y el rotulo
   van en el mismo parrafo y el texto fluye detras, que es como se lee. */
.mp-guia-mano, .mp-siente, .mp-parar, .mp-activos {
    margin: 10px 0 0; padding: 10px 13px; border-radius: var(--kctp-radio-ch, 12px);
    font-size: var(--kctp-t-menor, 1.0625rem); line-height: 1.5;
}
.mp-guia-mano > span, .mp-siente > span, .mp-parar > span, .mp-activos > span { margin-right: 5px; }
.mp-guia-mano strong, .mp-siente strong, .mp-parar strong, .mp-activos strong { white-space: nowrap; }

/* Lo que hay que PAUSAR por esta sesion (matriz de activos v2.1). Va antes de
   "es normal" porque es una instruccion, no una descripcion: se lee mientras
   se prepara la sesion. Tono de aviso suave, no de alarma: la alarma es
   .mp-parar y no puede haber dos. */
.mp-activos { background: var(--kctp-aviso-sw, #fdf3e7); color: var(--kctp-tinta, #2a1a21); border: 1px solid var(--kctp-aviso, #f0d9b8); }
.mp-guia-mano { background: var(--kctp-crema, #fdf8f6); color: var(--kctp-tinta, #2a1a21); border: 1px solid var(--kctp-linea, #ecdfe3); }
.mp-siente { background: var(--kctp-ok-sw, #eaf5f0); color: var(--kctp-tinta, #2a1a21); }

/* El aviso de parar es el unico que se sale del tono de la pagina, y a
   proposito: es la linea que hay que encontrar cuando algo va mal. */
.mp-parar {
    background: #fdecea; color: #7a1f16;
    border-left: 3px solid #b3382c;
}
.mp-parar strong { color: #7a1f16; }
/* El enlace de auxilio: grande y separado, porque se toca con prisa. */
.mp-wa {
    display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 100px;
    background: #b3382c; color: #fff; text-decoration: none; font-weight: 600;
    font-size: var(--kctp-t-meta, .95rem); min-height: 40px; line-height: 24px;
}
.mp-wa:hover, .mp-wa:focus { background: #8f2b21; color: #fff; }

.mp-marcar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mp-marcar .kctp-btn { min-height: 48px; padding: 10px 18px; border-radius: 12px; }
.mp-marcar .kctp-btn-primario { flex: 1 1 auto; box-shadow: 0 6px 16px -8px rgba(91, 12, 47, .55); }
.mp-marcar .kctp-btn-primario:hover { transform: translateY(-1px); }
.mp-marcar .kctp-btn-primario:active { transform: translateY(0); box-shadow: none; }

/* ---------------------------------------------------------- cuidado */
.mp-cuidado { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kctp-linea, #f3ecee); }
.mp-cuidado-bloque h3 { font-size: var(--kctp-t-micro, .8125rem); font-weight: 600; color: var(--kctp-guia, #67555d); margin: 0 0 4px; }
.mp-cuidado-bloque ul { margin: 0; padding-left: 18px; font-size: var(--kctp-t-meta, .95rem); }
.mp-cuidado-bloque li span { display: block; font-size: var(--kctp-t-micro, .8125rem); color: var(--kctp-guia, #67555d); }

/* ---------------------------------------------------------- semanas */
.mp-semana { border-top: 1px solid var(--kctp-borde, #ebe1e4); padding: 14px 0 10px; }
.mp-semana > summary {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: nowrap;
    cursor: pointer; font-weight: 600; font-size: var(--kctp-t-cuerpo, 1.1875rem); list-style: none; color: var(--kctp-tinto, #260514);
}
.mp-semana > summary::-webkit-details-marker { display: none; }
.mp-semana > summary > span em { display: block; font-style: normal; font-weight: 400; font-size: var(--kctp-t-meta, .95rem); color: var(--kctp-guia, #67555d); }
.mp-semana > summary > span small { font-weight: 400; color: var(--kctp-guia, #67555d); }
.mp-semana > summary > span { flex: 1 1 auto; min-width: 0; }
.mp-semana > summary > small { flex: 0 1 auto; text-align: right; font-weight: 400; font-size: var(--kctp-t-meta, .95rem); color: var(--kctp-guia, #67555d); }
.mp-semana > summary::after { content: "⌄"; flex: 0 0 auto; margin-left: 4px; color: var(--kctp-tenue, #7e6a73); transition: transform var(--kctp-mov, .3s); }
.mp-semana[open] > summary::after { transform: rotate(180deg); }

/* LA SEMANA EN UNA HOJA (Paul, 12-sep-2026 · la maqueta B que se le propuso a Carlos)
 *
 * Tres filas --mañana · aparato · noche-- por los días de la semana. Ocupa el sitio
 * de la tira de siete puntos que había antes y dice mucho más: la tira daba el día y
 * un emoji; la hoja da lo que la paciente hace desde que se levanta.
 *
 * Es una TABLA de verdad, no una rejilla de divs, porque el dato es tabular (días ×
 * momentos del día): así la recorre un lector de pantalla, así se imprime y así no
 * hace falta describir a mano lo que la estructura ya dice.
 *
 * En el teléfono se queda en emojis --la misma hoja sin texto--, porque siete
 * columnas de texto a 375 px no se leen. El detalle completo de cada día sigue
 * debajo, y tocar un día de la hoja lleva ahí. */
.mp-hoja {
    width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px;
    margin: 12px 0 4px; font-size: 12.5px;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.mp-hoja caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* La columna del rótulo, ancha: ahí vive la lista de lo que se repite todos los días,
   y con 98 px se partía en cuatro líneas y estiraba la fila entera. */
.mp-hoja thead td { width: 132px; padding: 0; border: 0; background: transparent; }
.mp-hs-dia { font-weight: 400; text-align: center; padding: 0 2px 4px; }
.mp-hs-dia b { display: block; font-size: 1rem; line-height: 1; color: var(--kctp-tinto, #260514); font-variant-numeric: tabular-nums; }
.mp-hs-dia small { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kctp-guia, #67555d); }
.mp-hs-dia.pasado { opacity: .55; }
.mp-hs-dia.hoy b { color: var(--kctp-acento, #5b0c2f); }
.mp-hs-dia.hoy small { color: var(--kctp-acento, #5b0c2f); font-weight: 600; }

.mp-hoja tbody th, .mp-hoja tbody td {
    padding: 7px 8px; vertical-align: top; text-align: left; border-radius: 9px;
    background: var(--kctp-blanco, #fff); border: 1px solid var(--kctp-borde, #ebe1e4);
}
.mp-hoja tbody th { padding-left: 0; font-weight: 600; color: var(--kctp-guia, #67555d); background: transparent; border: 0; }
.mp-hs-rot { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.mp-hs-rot em { display: block; margin-top: 2px; font-style: normal; font-weight: 400; font-size: .74rem; text-transform: none; letter-spacing: 0; color: var(--kctp-tenue, #7e6a73); }
.mp-hs-rot em b { font-weight: 600; color: var(--kctp-guia, #67555d); }

.mp-hs-txt { margin: 0; padding: 0; list-style: none; }
.mp-hs-txt li { margin: 0 0 1px; }
/* La marca de una fila constante: el rótulo ya dice qué es y que es todos los días,
   así que en cada celda basta una señal de que también hoy. La palabra "igual" repetida
   veintiuna veces era ruido con forma de dato. */
.mp-hs-marca { color: var(--kctp-borde-f, #dbc9d0); }
.mp-hs-nada { color: var(--kctp-tenue, #7e6a73); }
.mp-hs-ico { display: none; }   /* en pantalla ancha manda el texto; en el teléfono, el emoji */

.mp-hs-cuidado td { background: var(--kctp-crema, #f9f4f5); color: var(--kctp-tinta, #2a1a21); }
.mp-hs-aparato td.con   { background: var(--kctp-acento-sw, #f5edef); border-color: var(--kctp-borde-c, #e3d5da); }
.mp-hs-aparato td.hecha { background: var(--kctp-ok-sw, #e9f5f0); border-color: var(--kctp-ok-bd, #c8e6da); }
.mp-hs-aparato td.libre { color: var(--kctp-tenue, #7e6a73); }
.mp-hs-aparato a { display: block; color: inherit; text-decoration: none; }
.mp-hs-aparato a:hover .mp-hs-txt b { text-decoration: underline; }
.mp-hs-aparato a:focus-visible { outline: 2px solid var(--kctp-acento, #5b0c2f); outline-offset: 2px; border-radius: 6px; }
.mp-hs-ses { display: block; }
.mp-hs-ses + .mp-hs-ses { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--kctp-borde-c, #e3d5da); }
.mp-hs-ses .mp-hs-txt { display: block; }
.mp-hs-ses .mp-hs-txt b { display: block; color: var(--kctp-tinto, #260514); }
.mp-hs-ses .mp-hs-txt em { display: block; font-style: normal; color: var(--kctp-guia, #67555d); }
.mp-hs-ok { color: var(--kctp-ok, #1f7a58); font-weight: 700; }

.mp-dia { padding: 12px 0 8px; border-bottom: 1px dashed var(--kctp-borde, #ebe1e4); }
.mp-dia:last-child { border-bottom: 0; }
.mp-dia.libre { opacity: .75; }
.mp-dia.hoy { background: var(--kctp-crema, #f9f4f5); margin: 0 -12px; padding: 12px; border-radius: 10px; opacity: 1; }
.mp-dia-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mp-dia-cab strong { font-size: var(--kctp-t-menor, 1.0625rem); color: var(--kctp-tinto, #260514); }
.mp-dia-cab em { font-size: var(--kctp-t-meta, .95rem); color: var(--kctp-guia, #67555d); }
.mp-chip-hoy, .mp-chip-libre { font-size: .72rem; padding: 3px 9px; border-radius: 100px; font-weight: 600; letter-spacing: .02em; }
.mp-chip-hoy { background: var(--kctp-acento, #5b0c2f); color: #fff; }
.mp-chip-libre { background: var(--kctp-panel, #f5edef); color: var(--kctp-guia, #67555d); }
.mp-dia .mp-sesion { margin-top: 8px; }
.mp-nota { margin-top: 24px; }

/* ---------------------------------------------------- recomendaciones */
.plan-bloque.pe2-recs .pe2-recomendaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-bloque.pe2-recs .pe2-recomendaciones li {
    display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--kctp-radio-ch, 12px);
    background: var(--kctp-crema, #f9f4f5); border: 1px solid var(--kctp-borde, #ebe1e4);
}
.plan-bloque.pe2-recs .pe2-rec-emoji {
    flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--kctp-blanco, #fff); font-size: 1.25rem;
}
.plan-bloque.pe2-recs .pe2-recomendaciones strong { display: block; color: var(--kctp-tinto, #260514); font-size: var(--kctp-t-cuerpo, 1.1875rem); }
.plan-bloque.pe2-recs .pe2-recomendaciones p { margin: 2px 0 0; font-size: var(--kctp-t-menor, 1.0625rem); color: var(--kctp-tinta, #2a1a21); }

@media (max-width: 600px) {
    .mp-hoy { padding: 16px 14px 14px; }
    .mp-hora { font-size: 1.15rem; min-width: 52px; }
    .mp-foto { width: 48px; height: 48px; }
    .mp-marcar .kctp-btn { flex: 1 1 45%; justify-content: center; }
}

/* El teléfono: la hoja se queda en emojis. Siete columnas de texto a 375 px no se
   leen, y una hoja que no se lee no sirve de hoja. El texto está debajo, día a día. */
@media (max-width: 760px) {
    .mp-hoja { border-spacing: 3px; font-size: 11px; }
    .mp-hoja thead td { width: 30px; }
    .mp-hoja tbody th { padding: 8px 0 0; text-align: center; }
    .mp-hoja tbody td { padding: 8px 2px; text-align: center; }
    /* Con el nombre de la clase a secas no basta: `.mp-hs-ses .mp-hs-txt { display:block }`
       pesa más y el nombre del aparato se colaba en una columna de 45 px, partido en
       cinco líneas. Se nombra el mismo camino, más largo. */
    .mp-hoja .mp-hs-rot, .mp-hoja .mp-hs-txt, .mp-hoja .mp-hs-ses .mp-hs-txt { display: none; }
    .mp-hoja .mp-hs-ico { display: inline-block; font-size: 1rem; line-height: 1; }
    .mp-hs-dia b { font-size: .9rem; }
    .mp-hs-dia small { font-size: .58rem; }
    .mp-hs-ses + .mp-hs-ses { margin-top: 3px; padding-top: 3px; }
    .mp-hs-ok { font-size: .78rem; }
}

/* EL PAPEL. Imprimir ya era una acción principal del plan (el botón existe desde
   antes); lo que faltaba era algo que valiera la pena imprimir. En papel manda la
   hoja de cada semana --con el texto, aunque la semana esté plegada en pantalla-- y
   el detalle día a día se queda fuera: es de pantalla, y en papel serían diez hojas. */
@media print {
    .mp-semana:not([open]) > *:not(summary) { display: block; }
    .mp-semana > summary::after { content: none; }
    .mp-dia { display: none; }
    .mp-hoja { break-inside: avoid; font-size: 10.5px; }
    .mp-hoja tbody th, .mp-hoja tbody td { padding: 5px 6px; }
    .mp-hoja .mp-hs-ico { display: none; }
    .mp-hoja .mp-hs-rot { display: inline; }
    .mp-hoja .mp-hs-txt { display: revert; }
    .mp-hoja .mp-hs-ses .mp-hs-txt { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-progreso > span, .mp-semana > summary::after, .mp-marcar .kctp-btn-primario { transition: none; transform: none; }
}

/* ---------------------------------------- la tarjeta en "Mis planes" */
.pe2-tarjeta-hoy { margin-top: 14px; padding: 12px 14px; border-radius: var(--kctp-radio-ch, 12px); background: var(--kctp-crema, #f9f4f5); border: 1px solid var(--kctp-borde, #ebe1e4); }
.pe2-tarjeta-hoy-txt { margin: 0; font-size: var(--kctp-t-menor, 1.0625rem); color: var(--kctp-tinta, #2a1a21); }
.pe2-tarjeta-hoy-txt strong { color: var(--kctp-tinto, #260514); }
.pe2-tarjeta-hoy .mp-progreso { margin-top: 10px; height: 8px; }
.pe2-tarjeta-hoy-avance { display: block; margin-top: 6px; font-size: var(--kctp-t-micro, .8125rem); color: var(--kctp-guia, #67555d); }

/* ------------------------------------------ el menú inferior del portal (teléfono)
   Producción lo dibuja con cuatro columnas fijas y el portal tiene cinco atajos:
   "Mi ficha" caía a una segunda fila. Tantas columnas como atajos haya. */
@media (max-width: 699px) {
    .kctp-barra-abajo { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .kctp-barra-abajo .kctp-barra-item span { font-size: .7rem; letter-spacing: -.01em; white-space: nowrap; }
    .kctp-barra-abajo .kctp-barra-item i { font-size: 1.15rem; }
}

/* Franjas, no horas (11-sep, noche): la sesión dice mañana / tarde / noche. */
.mp-hora { min-width: 0; white-space: nowrap; letter-spacing: 0; font-variant-numeric: normal; }

/* EL CHECKPOINT (v2.1 §5). Se distingue de una sesion a proposito: no es algo
   que ella HACE, es algo que le PREGUNTAMOS. Por eso no lleva la foto del
   aparato ni el molde de la tarjeta de sesion. */
.mp-checkpoint {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin: 12px 0; padding: 14px 16px;
    background: var(--kctp-acento-sw, #f7eef2);
    border: 1px solid var(--kctp-acento, #b98a9b); border-radius: var(--kctp-radio-ch, 12px);
}
.mp-checkpoint.hecho { background: var(--kctp-ok-sw, #eaf5f0); border-color: var(--kctp-ok, #7fae95); }
.mp-cp-que { flex: 1 1 16rem; line-height: 1.45; }
.mp-cp-que strong { display: block; font-size: var(--kctp-t-menor, 1.0625rem); }
.mp-cp-que span { font-size: .95rem; color: var(--kctp-tinta-suave, #6b5b62); }
.mp-cp-resp { font-weight: 600; }
.mp-cp-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
@media (max-width: 480px) { .mp-cp-botones .kctp-btn { flex: 1 1 100%; } }