/* «Reglas de IA para tu equipo» · sólo lo propio de esta herramienta, bajo #reglas-ia.
   Portada: una hoja de diagnóstico de ejemplo; sus cinco filas entran escalonadas a 70 ms
   (opacity + 12 px, 420 ms) y cada estado aparece 160 ms después de su fila. Sólo transform y opacity.
   El semáforo usa tres colores propios (lo que explica), siempre acompañados de palabra y forma:
   Firme = anillo, Por ajustar = medio lleno, Atiende primero = lleno. */

#reglas-ia{
 --rg-firme:#2d6a4c;--rg-ajustar:#8a5300;--rg-atender:#a3271f;            /* sobre la hoja: ≥ 5:1 */
 --rg-firme-o:#9fd3b8;--rg-ajustar-o:#f0c27a;--rg-atender-o:#f2a49c       /* sobre ónix: ≥ 9:1 */
}

/* ——— El estado: palabra + forma + color ——— */
#reglas-ia .rg-estado{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
 font:500 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
#reglas-ia .rg-estado::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;box-sizing:border-box}
#reglas-ia .rg-estado[data-e="firme"]::before{border:2px solid currentColor;background:transparent}
#reglas-ia .rg-estado[data-e="ajustar"]::before{border:2px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
#reglas-ia .rg-estado[data-e="atender"]::before{background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}

/* ——— Portada: la hoja de ejemplo ——— */
#reglas-ia .rg-muestra{margin:30px 0 0;padding:16px 18px 14px;border-radius:16px;
 background:linear-gradient(160deg,rgb(255 255 255/.07),rgb(255 255 255/.03) 55%,rgb(230 180 194/.05));
 box-shadow:inset 0 0 0 1px rgb(243 242 245/.14),inset 0 1px 0 rgb(255 255 255/.12)}
#reglas-ia .rg-muestra-cab{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--linea);
 font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-suave)}
#reglas-ia .rg-muestra-cab span:last-child{color:var(--tenue);letter-spacing:.08em}
#reglas-ia .rg-muestra-filas{margin:0;padding:0;list-style:none}
#reglas-ia .rg-muestra-filas li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;border-bottom:1px solid rgb(243 242 245/.07)}
#reglas-ia .rg-muestra-filas li:last-child{border-bottom:0}
#reglas-ia .rg-muestra-filas b{font:500 16px/1.3 var(--sans);color:var(--platino-claro)}
#reglas-ia .rg-muestra .rg-estado[data-e="firme"]{color:var(--rg-firme-o)}
#reglas-ia .rg-muestra .rg-estado[data-e="ajustar"]{color:var(--rg-ajustar-o)}
#reglas-ia .rg-muestra .rg-estado[data-e="atender"]{color:var(--rg-atender-o)}
#reglas-ia .rg-muestra figcaption{margin-top:8px;padding-top:10px;border-top:1px solid var(--linea);font:400 14px/1.45 var(--sans);color:var(--tenue)}

@media (prefers-reduced-motion:no-preference){
 #reglas-ia .hr-portada.hr-activo .rg-muestra-filas li{animation:rg-fila .42s var(--entra) both;animation-delay:calc(.2s + var(--i) * 70ms)}
 #reglas-ia .hr-portada.hr-activo .rg-muestra-filas .rg-estado{animation:rg-estado .22s var(--entra) both;animation-delay:calc(.36s + var(--i) * 70ms)}
}
@keyframes rg-fila{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rg-estado{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* el botón va arriba: en un minuto difícil, empezar es lo primero */
#reglas-ia .hr-portada .hr-acciones{margin-top:24px}
#reglas-ia .hr-portada .hr-meta{margin-top:24px}

/* ——— El hilo de avance: fondo firme, para que lo que pasa debajo no se encime ——— */
#reglas-ia .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))){
 #reglas-ia .hr-avance{background:rgb(11 10 12/.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}

/* opciones cortas (tamaño): dos columnas también en el teléfono */
#reglas-ia .hr-opciones.rg-2col{grid-template-columns:1fr 1fr}

/* ——— La hoja: el diagnóstico ——— */
#reglas-ia .rg-sem{margin-top:22px;padding:18px 16px 14px;border-radius:12px;background:rgb(255 255 255/.72);box-shadow:inset 0 0 0 1px rgb(26 23 25/.10)}
#reglas-ia .hr-hoja .rg-sem h3{margin-top:0;padding-top:0;border-top:0}
#reglas-ia .hr-hoja .rg-sem-res{margin-top:8px;font:400 21px/1.3 var(--didona);color:var(--tinta)}
#reglas-ia .hr-hoja .rg-sem-lista{display:block;margin:12px 0 0;padding:0;list-style:none}
#reglas-ia .hr-hoja .rg-sem-lista li{padding:12px 0 12px;border-top:1px solid rgb(26 23 25/.10)}
#reglas-ia .hr-hoja .rg-sem-lista li::before{display:none}
#reglas-ia .rg-sem-fila{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
#reglas-ia .hr-hoja .rg-sem-fila b{font:600 16.5px/1.35 var(--sans);color:var(--tinta)}
#reglas-ia .hr-hoja .rg-sem-lista p{margin-top:4px;font:400 16px/1.5 var(--sans);color:#3d3840}
#reglas-ia .hr-hoja .rg-estado[data-e="firme"]{color:var(--rg-firme)}
#reglas-ia .hr-hoja .rg-estado[data-e="ajustar"]{color:var(--rg-ajustar)}
#reglas-ia .hr-hoja .rg-estado[data-e="atender"]{color:var(--rg-atender)}
#reglas-ia .hr-hoja .rg-sem-nota{margin-top:6px;padding-top:12px;border-top:1px solid rgb(26 23 25/.10);font:400 14.5px/1.5 var(--sans);color:#4a4450}
/* lo primero, esta semana: una lista corta y numerada, dentro del diagnóstico */
#reglas-ia .hr-hoja .rg-ya-t{margin-top:4px;padding-top:12px;border-top:1px solid rgb(26 23 25/.10);font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-tinta)}
#reglas-ia .hr-hoja .rg-ya{margin:10px 0 12px}
#reglas-ia .hr-hoja .rg-ya li{font-size:16px}
/* la política empieza con aire después del diagnóstico */
#reglas-ia .hr-hoja .rg-sem+p{margin-top:24px}
/* la tabla del registro: el campo en mono, la descripción respira */
#reglas-ia .hr-hoja td:first-child{min-width:6.6em}
#reglas-ia .hr-cita-copia{white-space:nowrap;letter-spacing:.05em;padding:0 12px}

/* ——— Computadora: la hoja de ejemplo acompaña a «Te llevas» ——— */
@media (min-width:1200px){
 #reglas-ia .hr-portada>.rg-lado{grid-column:2;grid-row:1 / span 9;align-self:start}
 #reglas-ia .rg-lado .rg-muestra{margin-top:6px}
 #reglas-ia .rg-lado .hr-lleva{margin-top:16px}
}

/* ——— Impresión: sólo la política, en una hoja carta, a dos columnas ——— */
@media print{
 @page{size:letter;margin:9mm 12mm 8mm}
 body#reglas-ia{min-height:0}
 #reglas-ia .rg-sem{display:none}
 #reglas-ia .hr-hoja{columns:2;column-gap:9mm}
 #reglas-ia .hr-hoja>.hr-hoja-cab,#reglas-ia .hr-hoja>h2,#reglas-ia .hr-hoja>.hr-hoja-sub,#reglas-ia .hr-hoja>.rg-sem+p{column-span:all}
 #reglas-ia .hr-hoja h2{margin-top:4px;font-size:17pt}
 #reglas-ia .hr-hoja .hr-hoja-sub{margin-top:2px;font-size:10pt}
 #reglas-ia .hr-hoja .rg-sem+p{margin:8px 0 4px}
 #reglas-ia .hr-hoja p,#reglas-ia .hr-hoja li,#reglas-ia .hr-hoja td,#reglas-ia .hr-hoja th,#reglas-ia .hr-cita blockquote p{font-size:8.1pt;line-height:1.32}
 #reglas-ia .hr-hoja h3{margin-top:6px;padding-top:4px;font-size:7.5pt;break-after:avoid}
 #reglas-ia .hr-hoja h3+ul,#reglas-ia .hr-hoja h3+ol,#reglas-ia .hr-hoja h3+p{margin-top:4px}
 #reglas-ia .hr-hoja ul,#reglas-ia .hr-hoja ol{gap:2px;margin-top:4px}
 #reglas-ia .hr-hoja ol li{padding-left:22px}
 #reglas-ia .hr-hoja ul li::before{top:.66em;height:0;background:none;border-top:1.5px solid #9e2f55}
 #reglas-ia .hr-hoja{padding-bottom:0;margin-top:0}
 #reglas-ia .hr-resultado,#reglas-ia .hr-app{min-height:0}
 #reglas-ia .hr-hoja ol li::before{font-size:7pt}
 #reglas-ia .hr-hoja p+p{margin-top:4px}
 #reglas-ia .hr-cita{margin-top:6px;padding:6px 8px;break-inside:avoid}
 #reglas-ia .hr-cita-etq{font-size:7pt}
 #reglas-ia .hr-cita blockquote{margin-top:2px}
 #reglas-ia .hr-hoja table{margin-top:4px}
 #reglas-ia .hr-hoja th{padding-bottom:2px;font-size:7pt}
 #reglas-ia .hr-hoja td{padding:2px 6px 2px 0}
 #reglas-ia .hr-hoja td:first-child{font-size:7.5pt;min-width:0}
 #reglas-ia .hr-nota{margin-top:6px;font-size:7.5pt!important}
 #reglas-ia .hr-hoja-pie{margin-top:4px;padding-top:4px;column-span:all;font-size:7pt}
 #reglas-ia .hr-hoja-pie i{font-size:9pt}
}