/* "Armá tu empleado digital" (armar.html, la arma build-empleados.py). Se carga después de clay.css y empleados.css
(de ahí salen el núcleo de Dai, las formas data-forma, .ic, .dai-av, .ce-ejemplo y el pie). Mismas piezas de Clay:
pastillas de 39 y 44 px con el 200 de la familia al elegir, botones de 42 px, campos del formulario "Hablemos".
Orden: botón avena, portada, card y pasos, cada paso (1 a 6), perfil en construcción, tablet, celular, pantallas
táctiles, movimiento. */
/* ============ Botón avena (spec 5, "terciario") y flecha hacia atrás ============ */
.btn--oat { background: var(--c-oat-btn); color: #000; }
.btn--oat:hover { background: var(--c-oat-btn-hover); }
.ar .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
/* ============ Formato onboarding: sin portada ============
El título va chico en el centro del menú y la card arranca a 16 del menú, apoyada sobre una franja del verde. */
.ar-nav-t {
position: absolute; left: 50%; translate: -50% 0; margin: 0; white-space: nowrap;
font-size: 16px; font-weight: 560; line-height: 1.2; letter-spacing: -0.01em; color: var(--c-ink);
}
.ar-nav-t span { color: var(--c-hero-bg); }
.ar-franja { height: calc(var(--nav-h) + 16px + var(--hero-overlap)); background: var(--c-hero-bg); }
@media (max-width: 767px) { .ar-nav-t { display: none; } }
/* Antes de que haya JS (o de elegir color), el violeta de Dai */
.t-neutro { --t-bg: var(--ube-100); --t-chip: var(--ube-200); --t-block: var(--ube-300); --t-accent: var(--ube-400); --t-ink: var(--ube-500); }
/* ============ Card del armado (sobre el verde, como la primera card de la home) ============ */
.ar { position: relative; z-index: 3; margin-top: calc(-1 * var(--hero-overlap)); padding-bottom: 64px; }
.ar-card { background: var(--t-bg); color: var(--t-ink); border-radius: var(--r-xl); transition: background-color 0.5s var(--ease-out-quart), color 0.5s var(--ease-out-quart); }
/* Pasos: pastillas como los chips de Clay; la del paso actual con el 200 de la familia */
.ar-pasos { list-style: none; margin: 0; padding: 24px 24px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ar-paso-b {
display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border: 0; border-radius: 12px;
background: var(--c-oat-100); box-shadow: var(--bevel); color: var(--c-ink); font: 500 14px/1.5 var(--font-sans); white-space: nowrap; cursor: pointer;
transition: background-color 0.3s var(--ease-out-circ), opacity 0.3s ease;
}
.ar-paso-b:hover:not(:disabled) { background: #fff; }
.ar-paso-b:disabled { opacity: 0.5; cursor: default; }
.ar-paso-b[aria-current="step"] { background: var(--t-chip); box-shadow: none; }
.ar-paso-n {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff;
font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--t-accent);
}
.ar-paso-b.is-hecho .ar-paso-n { background: var(--t-accent); color: #fff; }
.ar-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.ar-main { min-width: 0; padding: 36px 40px 48px 48px; }
.ar [hidden] { display: none !important; } /* .field y otras piezas tienen display propio: hidden tiene que ganar */
.ar-paso.is-in { animation: arIn 0.45s var(--ease-out-quart) both; }
@keyframes arIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ar-eb { font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t-accent); }
.ar-h { margin-top: 12px; font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.04em; color: var(--t-ink); }
.ar-h:focus:not(:focus-visible) { outline: none; }
.ar-p { margin-top: 16px; max-width: 540px; font-size: 16px; line-height: 1.4; }
.ar-p-grande { font-size: 20px; line-height: 1.3; }
.ar fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ar .ar-grupo { margin-top: 24px; } /* .ar fieldset pone margin 0: esto tiene que ganarle */
.ar-legend { display: block; margin-bottom: 10px; padding: 0; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t-accent); }
.ar-legend .opt { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-oat-800); }
.ar-err { margin-top: 20px; padding: 10px 14px; border-radius: 12px; background: var(--pomegranate-100); color: var(--pomegranate-400); font-size: 14px; line-height: 1.4; }
.ar-err:empty { display: none; }
.ar-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.ar .field input, .ar .field textarea { background: #fff; }
/* Entradas ocultas pero enfocables: la tarjeta o la pastilla que las envuelve muestra el estado */
.ar-rol input, .ar-chip input, .ar-avatar input, .ar-color input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ar-rol:has(:focus-visible), .ar-chip:has(:focus-visible), .ar-avatar:has(:focus-visible), .ar-color:has(:focus-visible) { outline: 2px dashed #000; outline-offset: 2px; }
/* ============ Paso 1: rol ============ */
.ar .ar-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.ar-rol {
position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 44px 18px 18px; border-radius: 20px;
background: #fff; box-shadow: var(--bevel), inset 0 0 0 1px rgba(209, 205, 199, 0.6); color: var(--c-ink); cursor: pointer;
transition: box-shadow 0.3s var(--ease-out-circ);
}
.ar-rol:hover { box-shadow: var(--bevel), inset 0 0 0 2px var(--t-chip); }
.ar-rol:has(:checked) { box-shadow: inset 0 0 0 2px var(--t-accent), 0 0 0 5px var(--t-chip); }
.ar-rol .tile { background: var(--t-bg); box-shadow: none; }
.ar-rol-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ar-rol-t { font-size: 18px; font-weight: 530; line-height: 1.3; }
.ar-rol-p { font-size: 14px; line-height: 1.4; color: var(--c-oat-800); }
.ar-rol-ej { margin-top: 6px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--t-accent); }
.ar-tilde {
position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
background: var(--t-accent); color: #fff; opacity: 0; scale: 0.6; transition: opacity 0.25s ease, scale 0.25s var(--ease-out-quart);
}
.ar-tilde .ic { width: 13px; height: 13px; stroke-width: 3; }
.ar-rol:has(:checked) .ar-tilde { opacity: 1; scale: 1; }
/* Seguir del paso 1 (.ar-rol-sigue, armar.js): con un rol que ya venía elegido, solo el botón (Pato, 15 oct: el armado
siempre arranca en el paso 1); con "Otro rol", el campo y Seguir en una misma fila (revisión, 15 oct: con Seguir debajo
del campo sumaban 110 a 125 de alto y el botón quedaba fuera de la pantalla). "¿Qué rol necesitas?" va arriba y el
campo ocupa todo el ancho que deja Seguir, para que se lea el rol entero (control, 15 oct: con el nombre al costado el
campo bajaba a 236 de ancho). Si no hay lugar para los dos (celular angosto), Seguir baja debajo del campo. El botón va
2 más arriba del borde: así queda centrado con el campo, que mide 46. */
.ar-rol-sigue { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 10px; margin-top: 16px; }
.ar-rol-otro { flex: 1 1 220px; }
.ar-paso .ar-rol-sigue .ar-acciones { flex: none; margin: 0 0 2px; padding: 0; }
/* Última fila: el asistente personal y "Otro rol", lado a lado y en chico (.is-fila: el nombre y la descripción, sin
los ejemplos), así el paso 1 sigue entrando en una pantalla con cinco roles. "Otro rol" lleva el nombre y la
descripción en un renglón que se corta solo. En celular (una columna) el asistente es una tarjeta como las demás. */
.ar-rol.is-fila { align-items: center; padding-block: 12px; }
.ar-rol.is-fila .ar-tilde { top: 50%; translate: 0 -50%; }
.ar-rol.is-otro .ar-rol-txt { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
@media (min-width: 768px) {
.ar-rol.is-fila .ar-rol-ej { display: none; }
}
/* ============ Pastillas (catálogo y empresa): las de Clay sobre fondo de color ============ */
.ar-chips, .ar-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-chip {
position: relative; display: inline-flex; align-items: center; min-height: 39px; padding: 8px 14px; border-radius: 12px;
background: var(--c-oat-100); box-shadow: var(--bevel); color: var(--c-ink); font: 500 0.87rem/1.4 var(--font-sans); cursor: pointer;
transition: background-color 0.3s var(--ease-out-circ), opacity 0.3s ease;
}
.ar-chip:hover { background: #fff; }
.ar-chip:has(:checked) { background: var(--t-chip); box-shadow: none; }
.ar-chip:has(:disabled) { opacity: 0.45; cursor: not-allowed; }
.ar-chip:has(:disabled):hover { background: var(--c-oat-100); }
/* ============ Paso 2: responsabilidades, un grupo a la vez ============
Arriba las pestañas de grupos (con cuántas lleva cada uno) y abajo las responsabilidades del grupo como pastillas que
se marcan: con un + para sumar y una tilde cuando está elegida. */
.ar-cuenta { display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto; align-self: center; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; color: var(--c-ink); }
.ar-cuenta b { font-weight: 600; color: var(--t-accent); font-variant-numeric: tabular-nums; }
.ar-catalogo { margin-top: 18px; padding: 8px 16px 16px; border-radius: 16px; background: #fff; box-shadow: var(--bevel); }
.ar-catalogo:empty { display: none; }
/* Aviso "Partes del perfil ...": cuando se llega desde perfiles.html (armar.js) */
.ar-perfil { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: 14px; padding: 6px 12px 6px 8px; border-radius: 12px; background: #fff; box-shadow: var(--bevel); font-size: 14px; line-height: 1.35; color: var(--c-ink); }
.ar-perfil[hidden] { display: none; }
.ar-perfil .ic { width: 16px; height: 16px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--t-accent); color: #fff; stroke-width: 3; }
.ar-perfil b { font-weight: 600; color: var(--t-ink); }
.ar-perfil + .ar-catalogo { margin-top: 12px; }
.ar-cat-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-inline: -8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-oat-200); }
.ar-cat-tab {
display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 6px 10px; border: 0; border-radius: 10px; background: none;
font: 500 14px/1.2 var(--font-sans); color: var(--c-oat-800); white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
}
.ar-cat-tab:hover { color: var(--c-ink); }
.ar-cat-tab[aria-selected="true"] { background: var(--t-bg); color: var(--t-ink); }
.ar-cat-tab:focus-visible { outline: 2px dashed #000; outline-offset: 1px; }
/* Cuántas lleva cada pestaña, en 12 (revisión, 15 oct: con 11 no se leía bien en celular ni en tablet) */
.ar-cat-n { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--t-accent); color: #fff; font-size: 12px; font-weight: 600; }
.ar-cat-n:empty { display: none; }
.ar-cat-g { padding-top: 14px; }
.ar-cat-g[hidden] { display: none; }
.ar-cat-g fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ar-resp { gap: 8px; padding-left: 10px; }
.ar-resp:has(:focus-visible) { outline: 2px dashed #000; outline-offset: 1px; }
.ar-resp-i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--t-bg); color: var(--t-accent); }
.ar-resp-i .ic { grid-area: 1 / 1; width: 12px; height: 12px; stroke-width: 3; }
.ar-resp-i .ic + .ic, .ar-resp:has(:checked) .ar-resp-i .ic:first-child { display: none; }
.ar-resp:has(:checked) .ar-resp-i { background: var(--t-accent); color: #fff; }
.ar-resp:has(:checked) .ar-resp-i .ic + .ic { display: block; }
.ar-resp-otro { margin-top: 20px; }
/* Pegar la descripción de puesto: cerrado es un renglón; abierto, una caja blanca */
.ar-jd { margin-top: 12px; border-radius: 16px; }
.ar-jd[open] { background: #fff; box-shadow: var(--bevel); }
.ar-jd summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; border-radius: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; list-style: none; }
.ar-jd[open] summary { padding: 12px 16px; }
.ar-jd summary::-webkit-details-marker { display: none; }
.ar-jd summary .ic { width: 18px; height: 18px; color: var(--t-accent); }
.ar-jd summary b { font-weight: 600; }
.ar-jd-in { padding: 0 16px 16px; }
.ar-jd-p { margin-bottom: 14px; font-size: 14px; line-height: 1.45; color: var(--c-oat-800); }
.ar-jd-n { margin-top: 6px; text-align: right; font-size: 12px; color: var(--c-oat-800); font-variant-numeric: tabular-nums; }
/* ============ Paso 3: identidad ============ */
.ar-nombre { max-width: 320px; margin-top: 28px; }
.ar-nombre input { font-size: 20px; font-weight: 500; }
.ar-sugerido { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 0; border: 0; background: none; color: var(--t-accent); font: 500 14px/1.4 var(--font-sans); cursor: pointer; }
.ar-sugerido .ic { width: 14px; height: 14px; }
.ar-avatares, .ar-colores { display: flex; flex-wrap: wrap; gap: 12px; }
/* Avatar (13 oct, en lugar de la forma): cada personaje con su foto y el fondo de su color (o su silueta si todavía
no hay foto). El marco del elegido va con el color del empleado, el que se elige abajo. */
.ar-avatar {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 96px; padding: 14px 12px 10px; border-radius: 16px;
background: var(--c-oat-100); box-shadow: var(--bevel); font-size: 14px; font-weight: 500; color: var(--c-ink); cursor: pointer; transition: background-color 0.3s var(--ease-out-circ), box-shadow 0.3s var(--ease-out-circ);
}
/* En compu los cinco van en una fila: de 96 de ancho, pero se achican solos hasta 80 (lo que mide la foto con su aire)
en vez de pasar a otra fila (revisión, 15 oct: de 992 a 1100 de ancho se partían en dos y "Ver su perfil" quedaba
fuera de la pantalla). En tablet y celular siguen de 96 y en varias filas, todas del mismo ancho. */
@media (min-width: 992px) {
.ar-avatar { flex: 1 1 0; min-width: 80px; max-width: 96px; padding-inline: 10px; }
}
.ar-avatar:hover { background: #fff; }
.ar-card .ar-avatar:has(:checked) { background: #fff; box-shadow: inset 0 0 0 2px var(--ar-marco), 0 0 0 5px var(--ar-marco-suave); }
.ar-card { --ar-marco: var(--t-accent); --ar-marco-suave: var(--t-chip); }
.ar-avatar-v { position: relative; display: block; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: radial-gradient(90% 90% at 50% 30%, var(--t-bg), var(--t-chip)); }
.ar-avatar-v img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-avatar-v img[hidden], .ar-avatar-v .tn-sil[hidden] { display: none; }
.ar-avatar-v .tn-sil { position: absolute; left: 50%; bottom: 0; width: 86%; translate: -50% 0; fill: var(--t-accent); opacity: 0.35; }
.ar-color { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--c-ink); cursor: pointer; }
.ar-color-v { width: 40px; height: 40px; border-radius: 50%; background: var(--t-accent); box-shadow: 0 0 0 3px var(--c-oat-100); transition: box-shadow 0.25s var(--ease-out-circ); }
.ar-color:has(:checked) .ar-color-v { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--t-accent); }
.ar-nota { max-width: 540px; margin-top: 24px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 1.4; color: var(--c-oat-800); }
/* ============ Avatar del empleado: ficha del paso 4 y pantalla final (lo pinta armar.js) ============
La pieza del centro del perfil, en chico: su foto sin fondo adentro de la forma de su personaje (las --f de
data-forma, que tema() pone en la card) y con el color elegido. Cambia de forma como en el perfil pero no gira: la cara
queda siempre derecha. (14 oct: antes la ficha tenía un cuadradito de color fijo y el final no tenía avatar.) */
.ar-av {
position: relative; flex: none; display: block; width: 64px; height: 64px; overflow: hidden;
border-radius: var(--f2); background: var(--t-chip); animation: ceMorph 11s ease-in-out infinite alternate-reverse;
}
.ar-av .ce-cara { rotate: none; }
.ar-av > i { position: absolute; inset: 26%; border-radius: var(--f1); background: var(--t-accent); } /* sin foto todavía */
/* ============ Paso 4: ficha del empleado digital ============
Arriba quién es (su avatar, nombre y rol); abajo, una fila por responsabilidad (qué le pedirías y qué te deja listo) y
la charla al costado. */
.ar-ficha { margin-top: 24px; padding: 22px 24px; border-radius: var(--r-md); background: #fff; box-shadow: var(--bevel); color: var(--c-ink); }
.ar-ficha-top { display: flex; align-items: center; gap: 14px; }
.ar-ficha-id { flex: 1; min-width: 0; }
.ar-ficha-k { font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t-accent); }
.ar-ficha-n { margin-top: 3px; font-size: 26px; font-weight: 530; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ar-ficha-meta { margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--c-oat-800); }
.ar-estado { flex: none; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--t-chip); color: var(--t-ink); font-size: 12px; font-weight: 600; line-height: 1.4; }
.ar-ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-oat-200); }
.ar-ej-t { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--c-ink); }
.ar-resp-tabla { display: grid; }
.ar-resp-fila { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1.1fr); gap: 14px; padding: 9px 0; border-top: 1px solid var(--c-oat-200); font-size: 14px; line-height: 1.4; }
.ar-resp-fila.is-cab { padding-top: 0; border-top: 0; font-size: 12px; font-weight: 600; color: var(--c-oat-800); }
.ar-resp-n { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; }
.ar-resp-n .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--t-accent); }
.ar-resp-deja { color: var(--c-oat-800); }
.ar-resp-texto { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.ar-ficha .ar-pendiente { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--c-oat-800); }
.ar-ficha-charla { align-self: start; padding: 14px 16px; border-radius: 16px; background: var(--t-bg); }
.ar-ej-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ar-ej-top .ar-ej-t { margin-bottom: 0; }
.ar-charla { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ar-b { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.ar-b.is-vos { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--c-ink); color: #fff; }
.ar-b.is-dai { align-self: flex-start; border-bottom-left-radius: 4px; background: #fff; color: var(--c-ink); }
.ar-b-quien { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--t-accent); }
.ar-ficha-nota { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--c-oat-800); }
/* ============ Paso 5: empresa y contacto ============ */
.ar-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Paso 5: tu nombre, tu correo, empresa, país, tipo y tamaño (estos tres, desplegables) en dos columnas */
.ar-empresa { gap: 16px 20px; margin-top: 24px; }
.ar-select { position: relative; display: block; }
.ar-select select {
width: 100%; height: 44px; padding: 10px 40px 10px 14px; border: 0; border-radius: 12px; background: #fff; color: var(--c-ink);
font: 400 16px/1.5 var(--font-sans); box-shadow: inset 0 0 0 1px #8c8881; appearance: none; -webkit-appearance: none; cursor: pointer;
transition: box-shadow 0.5s var(--ease-out-expo);
}
.ar-select select:has(option[value=""]:checked) { color: var(--c-muted-aa); }
.ar-select select:hover { box-shadow: inset 0 0 0 1px var(--c-ink); }
.ar-select select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-ink); }
.ar-select select:focus-visible { outline: 2px dashed #000; outline-offset: 2px; }
.ar-select .ic { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--c-oat-800); pointer-events: none; }
/* ============ Paso 6: Pulso lo prepara ============
Arriba, el avatar elegido al lado del título (en este paso el perfil de la derecha no se ve). */
.ar-fin-top { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
.ar-fin-txt { flex: 1; min-width: 0; }
.ar-fin-txt > .ar-h { margin-top: 0; }
.ar-fin-av { width: 96px; height: 96px; }
.ar-prep { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.ar-prep li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: var(--bevel); color: var(--c-ink); }
.ar-prep .tile { background: var(--t-bg); box-shadow: none; }
.ar-prep li > span:last-child { font-size: 14.5px; line-height: 1.4; color: var(--c-oat-800); }
.ar-prep b { display: block; font-size: 16px; font-weight: 600; color: var(--c-ink); }
.ar-paso.is-in .ar-prep li { animation: arIn 0.45s var(--ease-out-quart) both; }
.ar-paso.is-in .ar-prep li:nth-child(2) { animation-delay: 0.08s; }
.ar-paso.is-in .ar-prep li:nth-child(3) { animation-delay: 0.16s; }
.ar-paso.is-in .ar-prep li:nth-child(4) { animation-delay: 0.24s; }
.ar-paso.is-in .ar-prep li:nth-child(5) { animation-delay: 0.32s; }
.ar-listo { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 16px; border-radius: 12px; background: var(--t-chip); font-size: 16px; line-height: 1.4; color: var(--t-ink); }
.ar-listo .ic { width: 18px; height: 18px; color: var(--t-accent); }
.ar-listo b { font-weight: 600; overflow-wrap: anywhere; }
/* ============ Perfil en construcción (derecha): Dai y lo que va sumando ============ */
.ar-vista { min-width: 0; padding: 24px 24px 24px 0; }
.ar-vista-in {
position: sticky; top: 84px; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-md); background-color: #fff;
background-image: radial-gradient(circle, rgba(209, 205, 199, 0.55) 1px, transparent 1.5px); background-size: 22px 22px; background-position: center;
}
/* Rótulo "Dai · rol" (el .ce-rol-t de la home): acá va en el flujo, arriba del escenario, con ancho máximo dentro del
panel y en dos renglones si el rol es largo; el escenario baja lo que haga falta (revisión, 15 oct: suelto encima y
en un renglón, un "Otro rol" largo se salía del panel y se cortaba). Con un renglón se ve igual que antes. */
.ar-vista-t { position: relative; left: auto; top: auto; align-self: flex-start; max-width: calc(100% - 40px); margin: 20px 20px 0; border-radius: 14px; white-space: normal; overflow-wrap: anywhere; }
.ar-escena { position: relative; height: 430px; }
.ar-escena .ce-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ar-nodos { list-style: none; margin: 0; padding: 0; }
.ar-nodo {
position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 2; translate: -50% -50%;
display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 46%; padding: 5px 12px 5px 5px; border-radius: 14px;
background: #fff; box-shadow: var(--shadow-popover), inset 0 0 0 1px rgba(209, 205, 199, 0.7);
font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--c-ink);
}
.ar-nodo .tile { width: 28px; height: 28px; border-radius: 8px; background: var(--t-accent); color: #fff; box-shadow: none; }
.ar-nodo .tile .ic { width: 14px; height: 14px; stroke-width: 2.5; }
/* El nombre entero, en dos renglones (antes se cortaba con "..." y no se entendía cuál era). De 992 a 1079 de ancho el
panel es angosto: ahí los nodos van en 13 y con el ícono más chico, así "Control y seguimiento de cobranzas" entra en
dos renglones (revisión, 15 oct: salía cortada con "..."; en tres renglones tocaba el de la descripción de puesto). El
límite es de tres renglones por si algún nombre nuevo no entra en dos: mejor un renglón más que cortado. */
.ar-nodo > span:last-child { min-width: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; text-wrap: balance; }
@media (min-width: 992px) and (max-width: 1079px) {
.ar-nodo { gap: 6px; padding-right: 10px; font-size: 13px; }
.ar-nodo .tile { width: 24px; height: 24px; border-radius: 7px; }
}
.ar-nodo.is-jd { box-shadow: var(--shadow-popover), inset 0 0 0 1px var(--t-accent); }
.ar-nodo.is-jd .tile { background: var(--t-bg); color: var(--t-accent); }
/* La descripción de puesto va arriba al centro: colgada del borde de arriba del escenario (no centrada en él), así no tapa
el rótulo "Dai · rol" cuando el escenario es bajo (14 oct). Desde 992: en tablet los nodos van en fila, sin posición
(revisión, 15 oct: desde 768 le ganaba al translate: none de tablet y el recuadro se corría 46 afuera del panel). */
@media (min-width: 992px) { .ar-nodo.is-jd { translate: -50% 0; } }
.ar-nodo.is-nuevo { animation: ceCap 0.5s var(--ease-out-quart) both; }
.ar-escena .ce-l.is-on { stroke: var(--t-accent); }
.ar-lista { list-style: none; margin: 8px 20px 0; padding: 12px 0 16px; border-top: 1px solid var(--c-oat-200); background: #fff; }
.ar-lista li { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--c-ink); }
.ar-lista b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 500; color: var(--c-oat-800); }
.ar-lista-i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-oat-300); color: transparent; transition: background-color 0.3s ease, color 0.3s ease; }
.ar-lista-i .ic { width: 12px; height: 12px; stroke-width: 3; }
.ar-lista li.is-ok .ar-lista-i { background: var(--t-accent); box-shadow: none; color: #fff; }
/* ============ Escritorio: cada paso entra en una pantalla ============
La card queda debajo del menú (scroll-padding 80): pasos, encabezado, contenido y botones tienen que entrar en el alto
de la pantalla menos unos 100. "Paso N de 6" sobra al lado de las pastillas de pasos: queda solo para lectores. */
@media (min-width: 768px) {
.ar-eb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ar-h { margin-top: 0; font-size: min(var(--fs-h3), 3.2vw); }
.ar-fin-top { margin-top: 0; }
.ar-main { padding-top: 28px; padding-bottom: 32px; }
.ar-acciones { margin-top: 24px; }
.ar-escena { height: clamp(250px, calc(100vh - 440px), 430px); }
[data-paso="2"] .ar-p { max-width: none; }
}
@media (min-width: 992px) and (max-height: 860px) {
.ar-pasos { padding-top: 18px; }
.ar-paso-b { height: 36px; }
.ar-h { font-size: min(2.5rem, 3vw); }
.ar-p { margin-top: 10px; }
.ar .ar-roles { margin-top: 18px; }
.ar-rol { padding-block: 14px; }
.ar-acciones { margin-top: 18px; }
.ar-escena .ce-nucleo { width: 150px; height: 150px; }
.ar-escena .ce-forma.is-a { inset: 24px; }
.ar-escena .ce-onda { inset: 22px; }
.ar-lista { margin-top: 0; padding-block: 6px 10px; }
.ar-lista li { padding-block: 3px; }
}
@media (min-width: 992px) and (max-height: 720px) {
.ar-main { padding-top: 18px; padding-bottom: 16px; }
.ar-pasos { padding-top: 14px; }
.ar-paso-b { height: 34px; }
.ar-h { font-size: min(2rem, 2.6vw); }
.ar-p { font-size: 15px; }
.ar-catalogo { margin-top: 12px; }
.ar-jd { margin-top: 4px; }
.ar-acciones { margin-top: 8px; }
.ar-vista-t { margin-top: 16px; }
.ar-escena .ce-nucleo { width: 120px; height: 120px; }
.ar-escena .ce-forma.is-a { inset: 18px; }
.ar-escena .ce-onda { inset: 16px; }
.ar-escena .ce-nombre { font-size: 22px; }
.ar-lista { display: none; }
}
/* ============ Escritorio: la card ocupa la pantalla (formato onboarding) ============
Siempre del mismo alto (pantalla menos el menú y 16 de aire arriba y abajo) y el perfil de la derecha del mismo alto
que la columna de la izquierda: su contenido no le suma alto a la card. Los botones de cada paso van debajo del
contenido: si sobra lugar, con hasta 16 más de aire (el ::after, que va antes de los botones) y el resto queda debajo
de los botones. (14 oct: antes iban abajo de todo y en pantallas altas quedaba un hueco de 200 a 500 entre el
contenido y los botones, en los pasos 2, 4 y 6.) */
@media (min-width: 992px) and (min-height: 620px) {
.ar { padding-bottom: 16px; }
.ar-card { display: flex; flex-direction: column; min-height: calc(100vh - var(--nav-h) - 32px); }
.ar-grid { flex: 1 1 auto; }
.ar-main { display: flex; flex-direction: column; }
.ar-paso:not([hidden]) { display: flex; flex: 1 1 auto; flex-direction: column; }
.ar-paso .ar-acciones { order: 2; margin-top: 0; padding-top: 24px; }
.ar-paso::after { content: ""; order: 1; flex: 1 1 0; max-height: 16px; }
.ar-vista { position: relative; }
.ar-vista-in { position: absolute; inset: 24px 24px 24px 0; }
.ar-escena { flex: 1 1 auto; height: auto; min-height: 0; }
}
/* El aire arriba de los botones, el mismo que tenían antes según el alto (si no, el paso 4 se pasa de la pantalla) */
@media (min-width: 992px) and (min-height: 620px) and (max-height: 860px) { .ar-paso .ar-acciones { padding-top: 18px; } }
@media (min-width: 992px) and (min-height: 620px) and (max-height: 720px) { .ar-paso .ar-acciones { padding-top: 8px; } }
/* ============ Pasos 4 y 6 a todo el ancho (el perfil de la derecha se oculta: repetiría la ficha) ============ */
.ar-card.is-ancho .ar-vista { display: none; }
.ar-card.is-ancho .ar-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
.ar-card.is-ancho .ar-main { padding-right: 48px; }
.ar-card.is-ancho .ar-p { max-width: none; }
/* Paso 6: lo que viene, en tres columnas */
.ar-card.is-ancho .ar-prep { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1099px) {
.ar-card.is-ancho .ar-prep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pasos 3 a 5 con poco alto: todo un poco más chico; con menos de 720, sin los textos de ayuda ni los ejemplos repetidos */
@media (min-width: 992px) and (max-height: 860px) {
.ar-nombre { margin-top: 16px; }
.ar .ar-grupo { margin-top: 16px; }
.ar-avatar { min-width: 66px; max-width: 84px; gap: 6px; padding: 10px 10px 8px; }
.ar-avatar-v { width: 46px; height: 46px; }
.ar-color-v { width: 34px; height: 34px; }
.ar-nota { margin-top: 14px; padding-block: 8px; }
.ar-ficha { margin-top: 16px; padding: 18px 20px; }
.ar-ficha-av { width: 56px; height: 56px; }
.ar-fin-top { gap: 16px; }
.ar-fin-av { width: 64px; height: 64px; } /* acá el título va sin bajada */
.ar-ficha-n { font-size: 24px; }
.ar-resp-fila { padding: 7px 0; }
.ar-ficha-cuerpo { margin-top: 14px; padding-top: 12px; }
.ar-ficha-nota { margin-top: 8px; }
.ar-card.is-ancho .ar-p { display: none; } /* la bajada de los pasos 4 y 5: con poco alto, el título alcanza */
.ar-b { padding: 6px 10px; font-size: 13.5px; }
.ar-chips { gap: 6px; }
.ar-chip { min-height: 34px; padding: 6px 11px; font-size: 13.5px; }
.ar-legend { margin-bottom: 8px; }
.ar .field label { margin-bottom: 4px; }
}
@media (min-width: 992px) and (max-height: 760px) {
.ar-nota { display: none; }
[data-paso="3"] .ar-p, .ar-card.is-ancho .ar-p { display: none; }
.ar-ficha-charla { display: none; } /* con poco alto queda la tabla: la charla repite lo mismo */
.ar-ficha-cuerpo { grid-template-columns: minmax(0, 1fr); }
.ar-chip { min-height: 31px; padding: 5px 10px; font-size: 13px; }
/* Paso 6: el avatar al lado del título suma alto; lo de abajo, un poco más apretado para que entre */
.ar-fin-av { width: 52px; height: 52px; }
.ar-prep { margin-top: 16px; gap: 8px; }
.ar-prep li { padding-block: 10px; }
.ar-listo { margin-top: 12px; padding-block: 10px; }
}
/* Paso 4 en una pantalla, con hasta cuatro responsabilidades: se compacta solo si hace falta (14 oct). armar.js
(ajustar) mide si el paso entra en la card y, si no, le pone data-ajuste de a un nivel ("1", "1 2"...) hasta que entre:
1, menos aire entre las partes; 2, sin la línea "Ficha del empleado digital" (el título del paso ya lo dice) y el
avatar y el nombre más chicos; 3, sin la charla de ejemplo (repite la tabla); 4, sin "N responsabilidades para empezar"
a la vista y la tabla en letra un poco más chica. Con pantalla alta o pocas responsabilidades no se toca nada. */
@media (min-width: 992px) and (min-height: 620px) {
.ar-card[data-ajuste~="1"] .ar-ficha { margin-top: 12px; padding-block: 14px; }
.ar-card[data-ajuste~="1"] .ar-ficha-cuerpo { margin-top: 12px; padding-top: 10px; }
.ar-card[data-ajuste~="1"] .ar-resp-fila { padding-block: 5px; }
.ar-card[data-ajuste~="1"] .ar-resp-fila.is-cab { padding-top: 0; }
.ar-card[data-ajuste~="1"] .ar-charla { gap: 4px; margin-top: 8px; }
.ar-card[data-ajuste~="1"] .ar-b { padding: 5px 10px; font-size: 13.5px; }
.ar-card[data-ajuste~="1"] .ar-ficha-nota { margin-top: 6px; }
.ar-card[data-ajuste~="2"] .ar-ficha-k { display: none; }
.ar-card[data-ajuste~="2"] .ar-ficha-av { width: 48px; height: 48px; }
.ar-card[data-ajuste~="2"] .ar-ficha-n { margin-top: 0; font-size: 22px; }
.ar-card[data-ajuste~="3"] .ar-ficha-charla { display: none; }
.ar-card[data-ajuste~="3"] .ar-ficha-cuerpo { grid-template-columns: minmax(0, 1fr); }
.ar-card[data-ajuste~="4"] .ar-ficha-resp > .ar-ej-t:has(+ .ar-resp-tabla) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ar-card[data-ajuste~="4"] .ar-resp-fila { font-size: 13px; line-height: 1.35; }
.ar-card[data-ajuste~="4"] .ar-resp-fila.is-cab { font-size: 12px; }
.ar-card[data-ajuste~="4"] .ar-ficha-nota, .ar-card[data-ajuste~="4"] .ar-ficha .ar-pendiente { font-size: 12.5px; }
}
/* Paso 2 en una pantalla con "Pega la descripción de puesto" abierto (14 oct; antes la card crecía unos 220 y los
botones quedaban fuera). armar.js (ajustar) le da al cuadro de texto el alto que queda libre, entre seis y tres
renglones (lo que no se ve se lee desplazando adentro del cuadro); solo si con tres renglones no entra, compacta de a
un nivel con el mismo data-ajuste del paso 4: 1, menos aire en el catálogo y en la caja; 2, sin la bajada del paso ni
el rótulo del cuadro (lo dicen el título y "Pega la descripción de puesto"); 3, sin el aviso "Partes del perfil..."
(si se llegó desde perfiles: ya se vio al llegar); 4, sin el texto de ayuda de la caja; 5, sin la cuenta de
caracteres (el cuadro igual corta en el máximo); 6, el título en la letra de las pantallas bajas, en un renglón (hace
falta en tablets acostadas, 1024x768, donde las pestañas y las pastillas miden 44: control, 15 oct, la card se pasaba
3). Lo escondido sigue para lectores de pantalla. Con pantalla alta no se toca nada. */
@media (min-width: 992px) and (min-height: 620px) {
.ar-card[data-ajuste~="1"] [data-paso="2"] .ar-catalogo { padding-block: 6px 12px; }
.ar-card[data-ajuste~="1"] [data-paso="2"] .ar-cat-tabs { padding-bottom: 6px; }
.ar-card[data-ajuste~="1"] [data-paso="2"] .ar-err { margin-top: 8px; padding-block: 6px; } /* "Elige al menos una..." */
.ar-card[data-ajuste~="1"] [data-paso="2"] .ar-cat-tab { height: 30px; }
.ar-card[data-ajuste~="1"] [data-paso="2"] .ar-cat-g { padding-top: 10px; }
.ar-card[data-ajuste~="1"] .ar-jd[open] summary { padding-block: 8px; }
.ar-card[data-ajuste~="1"] .ar-jd-in { padding-bottom: 12px; }
.ar-card[data-ajuste~="1"] .ar-jd-p { margin-bottom: 8px; }
.ar-card[data-ajuste~="2"] [data-paso="2"] .ar-p, .ar-card[data-ajuste~="2"] .ar-jd .field label, .ar-card[data-ajuste~="3"] .ar-perfil,
.ar-card[data-ajuste~="4"] .ar-jd-p, .ar-card[data-ajuste~="5"] .ar-jd-n {
position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.ar-card[data-ajuste~="6"] [data-paso="2"] .ar-h { font-size: min(2rem, 2.6vw); }
}
/* Paso 5 con el aviso de error en pantallas bajas (revisión, 15 oct: la card se pasaba de 3 a 7 del borde con 620 de
alto). armar.js (ajustar) le pone un solo nivel, si no entra: menos aire entre los campos y alrededor del aviso. */
@media (min-width: 992px) and (min-height: 620px) {
.ar-card[data-ajuste~="1"] [data-paso="5"] .ar-empresa { gap: 10px 20px; margin-top: 14px; }
.ar-card[data-ajuste~="1"] [data-paso="5"] .ar-err { margin-top: 10px; padding-block: 7px; }
}
/* Paso 3 en tablets acostadas (1024x768), donde lo que se toca mide 44 y con "Volver a [nombre]" a la vista la card se
pasaba unos 30 (revisión, 15 oct). armar.js (ajustar), si no entra: 1, menos aire entre el nombre, el avatar y el
color; 2, sin la nota "El avatar es para reconocerlo..." (sigue para lectores de pantalla; con menos de 760 de alto
ya no se ve). En compu, con mouse, entra sin tocar nada. */
@media (min-width: 992px) and (min-height: 620px) {
.ar-card[data-ajuste~="1"] [data-paso="3"] .ar-nombre { margin-top: 10px; }
.ar-card[data-ajuste~="1"] [data-paso="3"] .ar-sugerido { margin-top: 2px; }
.ar-card[data-ajuste~="1"] [data-paso="3"] .ar-grupo { margin-top: 10px; }
.ar-card[data-ajuste~="1"] [data-paso="3"] .ar-nota { margin-top: 8px; }
.ar-card[data-ajuste~="2"] [data-paso="3"] .ar-nota { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Paso 1 con poco alto: cada rol con su nombre y su descripción (los ejemplos se repiten en el paso 2); con menos de 760,
sin la bajada del paso. Así los cinco roles entran en la pantalla. */
@media (min-width: 992px) and (max-height: 860px) {
.ar-rol-ej { display: none; }
}
@media (min-width: 992px) and (max-height: 760px) {
[data-paso="1"] .ar-p { display: none; }
.ar .ar-roles { gap: 10px; margin-top: 16px; }
.ar-rol { padding-block: 12px; }
.ar-rol-p { font-size: 13.5px; line-height: 1.35; }
.ar-rol.is-otro { padding-block: 10px; }
}
/* Paso 1 en una pantalla también con "Otro rol" abierto (revisión, 15 oct; antes Seguir quedaba hasta 103 debajo del
borde) y en anchos angostos, donde las descripciones van en tres renglones. armar.js (ajustar) lo compacta de a un
nivel con el mismo data-ajuste de los pasos 2 y 4, solo si no entra: 1, menos aire entre los roles y alrededor del
aviso "Cuéntanos qué rol necesitas"; 2, sin la bajada del paso (sigue para lectores de pantalla); 3, el nombre y la
descripción de cada rol en letra un poco más chica; 4, el ícono de cada rol más chico y, en los que no están elegidos,
sin el lugar de la tilde a la derecha: con más ancho, las descripciones van en menos renglones; 5, todavía menos aire
entre los roles (hace falta con 620 de alto, 1080 de ancho y el aviso). "¿Qué rol necesitas?" queda siempre arriba
del campo (control, 15 oct: al costado, el campo se achicaba y el rol no se leía entero). */
@media (min-width: 992px) and (min-height: 620px) {
.ar-card[data-ajuste~="1"] [data-paso="1"] .ar-p { margin-top: 8px; }
.ar-card[data-ajuste~="1"] [data-paso="1"] .ar-roles { gap: 8px; margin-top: 12px; }
.ar-card[data-ajuste~="1"] [data-paso="1"] .ar-rol { padding-block: 9px; }
.ar-card[data-ajuste~="1"] [data-paso="1"] .ar-rol-sigue { margin-top: 10px; }
.ar-card[data-ajuste~="1"] [data-paso="1"] .ar-err { margin-top: 8px; padding-block: 6px; }
.ar-card[data-ajuste~="2"] [data-paso="1"] .ar-p { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ar-card[data-ajuste~="3"] [data-paso="1"] .ar-rol-t { font-size: 16px; }
.ar-card[data-ajuste~="3"] [data-paso="1"] .ar-rol-p { font-size: 13px; line-height: 1.3; }
.ar-card[data-ajuste~="4"] [data-paso="1"] .ar-rol { gap: 10px; padding-left: 12px; }
.ar-card[data-ajuste~="4"] [data-paso="1"] .ar-rol .tile { width: 30px; height: 30px; }
.ar-card[data-ajuste~="4"] [data-paso="1"] .ar-rol:not(:has(:checked)) { padding-right: 14px; }
.ar-card[data-ajuste~="5"] [data-paso="1"] .ar-roles { gap: 6px; margin-top: 10px; }
.ar-card[data-ajuste~="5"] [data-paso="1"] .ar-rol { padding-block: 7px; }
}
/* ============ Escritorio base (992 a 1279) ============
Los roles siguen en dos columnas (en una columna, el paso 1 no entraba en pantallas de menos de 760 de alto) */
@media (max-width: 1279px) {
/* Solo el aire de los costados: el de arriba y abajo lo ponen las reglas por alto de más arriba (14 oct: este
"padding" entero las pisaba y a 1080x620 la card perdía 38 de alto) */
.ar-main { padding-inline: 32px 28px; }
.ar-rol { gap: 12px; padding: 14px 40px 14px 14px; }
.ar-rol-t { font-size: 17px; }
}
/* ============ Tablet (hasta 991): el perfil en chico (el núcleo y las tareas en fila, sin líneas). Sigue a la derecha de
los pasos, como en compu, desde 768 (Pato, 14 oct: en una ventana de 900 todo pasaba a una columna, como en el
celular). En celular el perfil no va en la página: va en la franja de arriba y, entero, en la hoja (más abajo). ===== */
@media (max-width: 767px) {
.ar-grid { grid-template-columns: minmax(0, 1fr); }
.ar-vista { display: none; }
.ar-vista-in { position: relative; top: auto; }
}
@media (max-width: 991px) {
.ar-escena { height: auto; padding: 8px 16px 16px; } /* el núcleo, 8 debajo del rótulo */
.ar-escena .ce-lineas { display: none; }
.ar-escena .ce-nucleo { position: relative; left: auto; top: auto; width: 132px; height: 132px; margin: 0 auto; translate: none; }
.ar-escena .ce-forma.is-a { inset: 20px; }
.ar-escena .ce-onda { inset: 20px; }
.ar-escena .ce-nombre { font-size: 22px; }
.ar-nodos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.ar-nodo { position: relative; left: auto; top: auto; translate: none; max-width: 100%; }
.ar-lista { display: none; }
.ar-main { padding: 28px 24px 36px; }
.ar .ar-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tablet en columnas (768 a 991): la columna de los pasos mide unos 420, así que los roles del paso 1 van de a uno (de a
dos, "Administración y finanzas" no entraba en su tarjeta).
Paso 4: las responsabilidades y "Cómo trabajaría" a la par, como en compu (revisión, 14 oct: acá iban una arriba de la
otra), con la letra y el aire un poco más chicos. La columna de las responsabilidades mide de 360 a 500: no alcanza
para las tres columnas de la tabla, así que cada fila va como en celular, el nombre y debajo qué le pedirías y qué te
deja listo (sin los títulos de columna). */
@media (min-width: 768px) and (max-width: 991px) {
.ar .ar-roles { grid-template-columns: minmax(0, 1fr); }
.ar-ficha { padding: 18px 20px; }
.ar-ficha-cuerpo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.ar-resp-fila { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; font-size: 13.5px; }
.ar-resp-fila.is-cab { display: none; }
.ar-resp-pide, .ar-resp-deja { padding-left: 21px; } /* debajo del nombre, no del tilde */
.ar-ficha-charla { padding: 12px; }
.ar-charla { margin-top: 10px; }
.ar-b { max-width: 92%; padding: 7px 10px; font-size: 13px; }
}
/* ============ Celular (hasta 767) ============ */
@media (max-width: 767px) {
.ar { padding-bottom: 40px; }
.ar-pasos { flex-wrap: nowrap; overflow-x: auto; padding: 16px 16px 0; scrollbar-width: none; }
.ar-pasos::-webkit-scrollbar { display: none; }
.ar-paso-b { padding-right: 6px; }
.ar-paso-b .ar-paso-l { display: none; }
.ar-paso-b[aria-current="step"] { padding-right: 14px; }
.ar-paso-b[aria-current="step"] .ar-paso-l { display: inline; }
.ar-vista-t { max-width: calc(100% - 24px); margin: 12px 12px 0; }
.ar-main { padding: 24px 20px 28px; }
.ar .ar-roles { grid-template-columns: minmax(0, 1fr); }
.ar-campos { grid-template-columns: minmax(0, 1fr); }
.ar-ficha-cuerpo { grid-template-columns: minmax(0, 1fr); }
.ar-resp-fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ar-resp-fila.is-cab { display: none; }
.ar-ficha { padding: 18px; }
.ar-ficha-top { flex-wrap: wrap; row-gap: 8px; }
.ar-ficha-av { width: 56px; height: 56px; }
/* El nombre y el rol al lado del avatar con lugar; "Perfil inicial" baja, alineado con el texto (si no, el texto
quedaba en una columna de tres palabras) */
.ar-ficha-id { flex: 1 1 170px; }
.ar-ficha-top .ar-estado { margin-left: 70px; }
.ar-ficha-n { font-size: 24px; }
.ar-p-grande { font-size: 18px; }
.ar-fin-top { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 16px; } /* el avatar arriba del título */
.ar-fin-av { width: 80px; height: 80px; }
}
/* ============ Celular: el perfil en una franja fija y entero en una hoja (Pato, 15 oct) ============
Antes el perfil iba arriba de los pasos y había que subir y bajar para ver qué cambiaba. Ahora lo principal son los
pasos: arriba queda una franja fija debajo del menú (avatar, nombre, rol y cuántas responsabilidades lleva) que se
actualiza sola y late cuando se suma algo (armar.js, tira); al tocarla se abre el dibujo entero en una hoja que sube
desde abajo. En los pasos 4 y 6 la franja no va: el perfil está en el paso (la ficha y el final). Al cambiar de paso
la pantalla deja el paso justo debajo de la franja (scroll-padding-top con su alto, --ar-tira-h). La última sombra es
un borde liso de 12 del color de la card: tapa lo que pasa por detrás (las pastillas de pasos, el texto) y llega justo
al borde de la card, con su misma curva (16 + 12 = 28). */
.ar-tira { display: none; }
@media (max-width: 767px) {
/* Arriba el nombre y la cuenta, abajo el rol a todo el ancho (así "Administración y finanzas" entra en un renglón
también a 320); el avatar y la flecha, a los costados de los dos renglones */
.ar-tira {
position: sticky; top: 64px; z-index: 20; display: grid; grid-template-columns: 40px auto minmax(0, 1fr) 18px;
grid-template-areas: "av nom n ic" "av rol rol ic"; align-items: center; gap: 2px 10px; width: calc(100% - 24px); margin: 12px 12px 0;
padding: 8px 12px 8px 8px; border: 0; border-radius: 16px; background: #fff; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer;
box-shadow: var(--shadow-popover), inset 0 0 0 1px rgba(209, 205, 199, 0.7), 0 0 0 12px var(--t-bg);
}
.ar-tira:focus-visible { outline: 2px dashed #000; outline-offset: 2px; }
.ar-card.is-ancho .ar-tira { display: none; }
.ar-tira-av { grid-area: av; width: 40px; height: 40px; }
.ar-tira-txt { display: contents; }
.ar-tira-txt b { grid-area: nom; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--t-accent); overflow-wrap: anywhere; }
/* El rol en hasta dos renglones: uno de "Otro rol" muy largo se lee entero en la hoja */
#ar-tira-rol { grid-area: rol; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 13px; line-height: 1.3; color: var(--c-oat-800); overflow-wrap: anywhere; }
.ar-tira-n { grid-area: n; justify-self: start; padding: 1px 8px; border-radius: 999px; background: var(--t-chip); color: var(--t-ink); font-size: 12px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-tira > .ic { grid-area: ic; width: 18px; height: 18px; color: var(--c-oat-800); }
.ar-tira.is-suma .ar-tira-n { animation: arSuma 0.6s var(--ease-out-quart); }
html:has(.ar-card:not(.is-ancho)) { scroll-padding-top: calc(64px + var(--ar-tira-h, 56px) + 12px); } /* + el borde liso */
html { scroll-padding-bottom: 88px; } /* lo enfocado no queda debajo de Seguir, pegado abajo */
html:has(.ar-hoja[open]) { overflow: hidden; } /* con la hoja abierta, la página no se mueve debajo */
/* Seguir pegado abajo en los pasos 1 (con el rol ya elegido) a 3: se ve sin bajar hasta el final de las opciones. La
cuenta "N de 4 elegidas" del paso 2 ya está en la franja: queda solo para lectores de pantalla. */
[data-paso="2"] > .ar-acciones, [data-paso="3"] > .ar-acciones, .ar-rol-sigue:has(.ar-rol-otro[hidden]) {
position: sticky; bottom: 0; z-index: 5; margin-inline: -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
background: var(--t-bg); box-shadow: 0 -14px 16px -16px rgba(0, 0, 0, 0.35);
}
[data-paso="2"] .ar-cuenta { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* El aviso "Elige al menos una responsabilidad..." también queda pegado, justo arriba de Seguir (68: lo que mide la
barra): si no, salía debajo de las opciones, fuera de la pantalla, y al tocar Seguir no pasaba nada a la vista */
[data-paso="2"] > .ar-err { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 5; }
/* Paso 1: cada rol con su nombre y su descripción, sin los ejemplos (se repiten en el paso 2): menos para bajar */
.ar-rol-ej { display: none; }
}
@keyframes arSuma { 0% { scale: 1; } 35% { scale: 1.22; } 100% { scale: 1; } }
/* La hoja (un