/* «Vas a moderar una mesa» · sólo lo propio de esta herramienta, bajo #moderar.
   El objeto de la portada es la regla del tiempo: la mesa ya repartida en bloques. Los bloques se trazan
   de izquierda a derecha (scaleX, 520 ms, escalonados a 80 ms) y las tres voces suben 12 px después.
   Ritmo más calmado que las otras herramientas: el paso llega en 360 ms y el consejo aparece 140 ms después.
   Sólo transform y opacity. Con movimiento reducido, todo quieto y completo. */

#moderar{
 --mo-ap:#f3dde4;--mo-pr:#d9d7dc;--mo-r1:#c45c7c;--mo-r2:#9e2f55;--mo-pu:#8c8696;--mo-ci:#e6b4c2;
}

/* ——— Ritmo calmado ——— */
#moderar .hr-activo.hr-llega-a{animation-duration:.36s}
#moderar .hr-activo.hr-llega-b{animation-duration:.36s}
@media (prefers-reduced-motion:no-preference){
 #moderar .hr-paso.hr-llega-a .hr-consejo{animation:mo-sube .42s var(--entra) .14s both}
}
@keyframes mo-sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ——— La regla del tiempo (compartida: portada, paso 2 y hoja) ——— */
#moderar .mo-regla{display:flex;gap:3px;height:16px;width:100%}
#moderar .mo-seg{flex:var(--w,1) 1 0;min-width:4px;border-radius:4px;transform-origin:0 50%}
#moderar .mo-s-ap{background:var(--mo-ap)}
#moderar .mo-s-pr{background:var(--mo-pr)}
#moderar .mo-s-r1{background:var(--mo-r1)}
#moderar .mo-s-r2{background:var(--mo-r2)}
#moderar .mo-s-pu{background:var(--mo-pu)}
#moderar .mo-s-ci{background:var(--mo-ci)}
#moderar .mo-leyenda{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 0 0;padding:0;list-style:none}
#moderar .mo-leyenda li{display:inline-flex;align-items:center;gap:8px;font:400 16px/1.3 var(--sans);color:var(--sutil)}
#moderar .mo-leyenda b{font:500 13px/1 var(--mono);color:var(--platino-claro);letter-spacing:.02em}
#moderar .mo-leyenda i{display:block;width:12px;height:12px;border-radius:3px;flex:none}

/* ——— El objeto de la portada ——— */
#moderar .mo-objeto{margin:30px 0 0}
#moderar .mo-objeto-hoja{position:relative;display:block;width:min(100%,360px);padding:18px 18px 20px;border-radius:18px;
 background:linear-gradient(160deg,rgb(255 255 255/.09),rgb(255 255 255/.03) 55%,rgb(196 92 124/.08)),rgb(20 18 22/.6);
 box-shadow:0 22px 44px -20px rgb(0 0 0/.8),inset 0 0 0 1px rgb(243 242 245/.14),inset 0 1px 0 rgb(255 255 255/.12)}
#moderar .mo-objeto-cab{display:flex;justify-content:space-between;gap:10px;font:500 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
#moderar .mo-objeto-cab b{font-weight:500;color:var(--rosa-suave)}
#moderar .mo-objeto-cab span{color:var(--tenue);letter-spacing:.06em}
#moderar .mo-objeto .mo-regla{margin-top:18px;height:22px}
#moderar .mo-objeto-eje{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font:500 12px/1.2 var(--mono);letter-spacing:.04em;color:var(--tenue)}
#moderar .mo-objeto-voces{margin:18px 0 0;padding:14px 0 0;list-style:none;display:grid;gap:10px;border-top:1px dashed rgb(243 242 245/.16)}
#moderar .mo-objeto-voces li{display:grid;grid-template-columns:14px 1fr;align-items:center;gap:12px}
#moderar .mo-objeto-voces i{width:12px;height:12px;border-radius:50%;background:var(--rosa-perla);box-shadow:0 0 0 3px rgb(196 92 124/.25)}
#moderar .mo-objeto-voces b{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--mo-r1) 0 46%,rgb(243 242 245/.16) 46% 100%)}

@media (prefers-reduced-motion:no-preference){
 #moderar .hr-portada.hr-activo .mo-objeto-hoja{animation:mo-sube .52s var(--entra) .1s both}
 #moderar .hr-portada.hr-activo .mo-objeto .mo-seg{animation:mo-traza .52s var(--entra) both;animation-delay:calc(.4s + var(--i,0) * 80ms)}
 #moderar .hr-portada.hr-activo .mo-objeto-voces li{animation:mo-sube .42s var(--entra) both;animation-delay:calc(1s + var(--i,0) * 80ms)}
}
@keyframes mo-traza{from{transform:scaleX(0);opacity:.3}to{transform:none;opacity:1}}

#moderar .hr-app [hidden]{display:none!important}

/* ——— Campos propios ——— */
#moderar .mo-opcional{margin-left:6px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);white-space:nowrap}
#moderar .mo-corta{max-width:220px}
#moderar .hr-texto.mo-medio{min-height:104px}
#moderar .mo-opciones-dur{grid-template-columns:repeat(2,minmax(0,1fr))}
#moderar .mo-opciones-dur .mo-otra{grid-column:1 / -1}
#moderar .mo-opciones-dur .hr-opcion-c{align-items:center}
@media (min-width:600px){
 #moderar .mo-opciones-dur{grid-template-columns:repeat(4,minmax(0,1fr))}
}
#moderar .mo-cuenta{margin-top:10px;font:500 16px/1.45 var(--sans);color:var(--sutil)}
#moderar .mo-cuenta:empty{display:none}
#moderar .mo-cuenta-ojo{color:var(--rosa-suave)}

/* la regla en vivo del paso 2 */
#moderar .mo-vivo{margin-top:22px;padding:18px 18px 16px;border-radius:18px;background:rgb(255 255 255/.04);box-shadow:inset 0 0 0 1px var(--linea)}
#moderar .mo-vivo[hidden]{display:none}
#moderar .mo-vivo-etq{margin-bottom:14px;font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}

/* el hilo con fondo firme: lo que pasa debajo no se encima */
#moderar .hr-avance{background:rgb(11 10 12/.95);box-shadow:0 18px 22px -10px rgb(11 10 12/.95)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 #moderar .hr-avance{background:rgb(11 10 12/.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}

/* ——— La hoja ——— */
#moderar .mo-hoja-regla{margin-top:20px}
#moderar .hr-hoja .mo-regla{height:18px}
#moderar .hr-hoja .mo-seg{box-shadow:inset 0 0 0 1px rgb(26 23 25/.28)}
#moderar .hr-hoja .mo-leyenda{gap:6px 14px;margin-top:10px}
#moderar .hr-hoja .mo-leyenda li{font:400 14px/1.3 var(--sans);color:#4a4450;padding:0}
#moderar .hr-hoja .mo-leyenda li::before{display:none}
#moderar .hr-hoja .mo-leyenda b{color:var(--tinta);font-size:12px}
#moderar .hr-hoja .mo-leyenda i{box-shadow:inset 0 0 0 1px rgb(26 23 25/.28)}
#moderar .hr-hoja td:nth-child(2){font-weight:600;white-space:nowrap}
/* en el teléfono, cada bloque de la escaleta es una ficha: hora y bloque arriba, qué haces abajo */
@media (max-width:599px){
 #moderar .hr-hoja table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #moderar .hr-hoja table tr{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:12px 0;border-bottom:1px solid rgb(26 23 25/.10)}
 #moderar .hr-hoja table td{padding:0;border:0;width:auto}
 #moderar .hr-hoja table td:first-child{padding-right:0}
 #moderar .hr-hoja table td:nth-child(3){grid-column:1 / -1;margin-top:4px;color:#3a343c}
}
/* las preguntas: un poco más de aire entre ellas */
#moderar .hr-hoja ol{gap:12px}
#moderar .hr-hoja .hr-cita + h3{margin-top:30px}

/* ——— Computadora ——— */
@media (min-width:1200px){
 #moderar .hr-portada>.hr-lleva{grid-row:1 / span 3;margin-top:28px}
 #moderar .hr-portada>.mo-objeto{grid-column:2;grid-row:4 / span 6;margin-top:22px;align-self:start}
 #moderar .hr-portada>.mo-objeto .mo-objeto-hoja{width:100%}
}

@media print{
 #moderar .mo-seg{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}