/* Automatizaciones (la lista, no el tablero del bot) como «Tu equipo», en una oficina: en la pared cuelga de una cuerda la
   credencial de papel de cada bot, de su cinta de color y un poco ladeada (tendedero.js le da peso: se balancea, choca y
   se asienta); la «foto» de cada credencial es el flujo del bot. Abajo, en la misma pared, las plantillas como hojas en
   una grilla. Lo que no es la cuerda ni las hojas (la pared) va sobrio.
   Paleta y letra propias mientras se ve la lista: pared gris cálido, papel, tinta y las cintas. Al ir a otra sección
   vuelven las de la marca. El menú lateral (el riel, en espacio.css) usa la misma letra y sus propios colores en todas
   las secciones. Las piezas que usa la barra del editor (los botones pastilla y redondos, la pastilla de estado) siguen
   al final, sin cambios. */

/* ---------- Letra y paleta ---------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/automatizaciones/archivo.woff2') format('woff2');
}

/* De día: una pared de oficina pintada de gris cálido, el menú ultramar y credenciales de papel. */
body.espacio[data-shown="list"] {
  --fuente-titulos: 'Archivo', system-ui, sans-serif;
  --fuente-texto: 'Archivo', system-ui, sans-serif;
  --fondo: var(--lienzo-base, #f6f1e7);
  --texto: #15172b;
  --texto-fuerte: #15172b;
  --texto-suave: #5b5f78;
  --borde: color-mix(in srgb, #15172b 13%, transparent);
  --encima: color-mix(in srgb, #15172b 6%, transparent);
  --activo: color-mix(in srgb, #2430a6 15%, #f7f7f2);
  --foco: #ff6b5b;
  --superficie: #f7f7f2;
  --superficie-baja: #ecece4;
  --tablero-texto: #15172b;
  --tablero-suave: #4b4d63;
  --luz-ventana: #fff6e366;
  --vineta: #2a231a47;
  --grano: 0.06;
  --papel: #f7f7f2;
  --tinta-e: #15172b;
  --gris-e: #5b5f78;
  --luz-turno: #22b07d;
  --luz-cambios: #f0a800;
  --luz-descanso: #9aa0b4;
  --sombra-cred: 0 18px 34px -18px oklch(0.4 0.12 290 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.9);
}
/* De noche: la misma pared con la luz apagada; las credenciales siguen siendo de papel, un poco más apagado. */
html[data-theme="dark"] body.espacio[data-shown="list"] {
  --fondo: var(--lienzo-base, #17132f);
  --tablero-texto: #f2efe6;
  --tablero-suave: rgb(242 239 230 / 0.72);
  --luz-ventana: #fff1d61f;
  --vineta: #0000008c;
  --grano: 0.1;
  --texto: #e8eaff;
  --texto-fuerte: #ffffff;
  --texto-suave: #a9aed6;
  --borde: color-mix(in srgb, #ffffff 12%, transparent);
  --encima: color-mix(in srgb, #ffffff 7%, transparent);
  --activo: color-mix(in srgb, #7f8cff 26%, #0f1340);
  --superficie: #1b2170;
  --superficie-baja: #141a5c;
  --papel: #17132f;
  --sombra-cred: 0 20px 38px -16px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.14);
  --tinta-e: #f2efe6;
  --gris-e: rgb(242 239 230 / 0.72);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.espacio[data-shown="list"] {
    --fondo: var(--lienzo-base, #17132f);
    --tablero-texto: #f2efe6;
    --tablero-suave: rgb(242 239 230 / 0.72);
    --luz-ventana: #fff1d61f;
    --vineta: #0000008c;
    --grano: 0.1;
    --texto: #e8eaff;
    --texto-fuerte: #ffffff;
    --texto-suave: #a9aed6;
    --borde: color-mix(in srgb, #ffffff 12%, transparent);
    --encima: color-mix(in srgb, #ffffff 7%, transparent);
    --activo: color-mix(in srgb, #7f8cff 26%, #0f1340);
    --superficie: #1b2170;
    --superficie-baja: #141a5c;
    --papel: #17132f;
    --sombra-cred: 0 20px 38px -16px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.14);
    --tinta-e: #f2efe6;
    --gris-e: rgb(242 239 230 / 0.72);
  }
}
body.espacio[data-shown="list"] { font-family: var(--fuente-texto); }
/* Los avisos flotan arriba, sobre la pared, sin ocupar lugar (si no, dejaban una franja sin pared arriba). */
body.espacio[data-shown="list"] > main > #message { position: absolute; z-index: 3; margin: 0.6rem 0 0; color: var(--tablero-texto); }
body.espacio[data-shown="list"] > main { position: relative; }
/* Lo que se balancea en la cuerda no ensancha la página. */
body.espacio[data-shown="list"] > main { overflow: clip; }
/* La pared de la oficina: pintura mate gris cálido. Encima, el grano fino de la pintura (ruido de alta frecuencia, apenas
   oscuro), unas manchas muy suaves donde el rodillo pasó distinto, la luz cálida de una ventana que no se ve arriba a la
   izquierda y los bordes más oscuros, para que la vista vaya a la cuerda y a la mesa. */
/* La sección cubre todo <main> (márgenes negativos y el mismo relleno), con la pared de fondo. */
.autos {
  --orilla-main: clamp(1rem, 3vw, 2.5rem);
  margin: -2rem calc(var(--orilla-main) * -1) -3rem;
  padding: 2rem var(--orilla-main) 3rem;
}
/* Todo el ancho, alineado al menú: en una pantalla ancha la cuerda va de borde a borde y caben todas sin arrastrar. */
[data-shown="list"] > main.wide { max-width: none; }

/* ---------- Cabecera, en la pared ---------- */

.autos-cabeza { margin-bottom: 0.5rem; color: var(--tablero-texto); }
/* .autos delante: le gana a «body.espacio h2» de espacio.css, que lo pintaría con la tinta. */
.autos .autos-cabeza h2 { margin: 0; color: var(--tablero-texto); font-family: var(--fuente-titulos); font-size: clamp(2.6rem, 6vw, 4rem); font-stretch: 125%;
  font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; }
.autos-cabeza h3 { margin: 0; color: var(--tablero-texto); font-family: var(--fuente-titulos); font-size: 1.6rem; font-stretch: 115%; font-weight: 750; }
.autos-bajada { max-width: 58ch; margin: 0.7rem 0 0; color: var(--tablero-suave); font-size: 1.05rem; }
.autos-cabeza > .cred-acciones { margin-top: 1.1rem; }

/* ---------- Botones ---------- */

.equipo-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.5rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--tinta-e) 22%, transparent);
  border-radius: 0.55rem;
  background: transparent;
  color: var(--tinta-e);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.equipo-boton:hover { background: color-mix(in srgb, var(--tinta-e) 7%, transparent); }
.equipo-boton.es-principal { border-color: transparent; background: var(--tinta-e); color: var(--papel); }
.equipo-boton.es-principal:hover { background: color-mix(in srgb, var(--tinta-e) 85%, var(--papel)); }
/* Sobre la pared: el borde y la letra con el color del texto de la pared. */
.equipo-boton.es-claro { border-color: color-mix(in srgb, var(--tablero-texto) 40%, transparent); color: var(--tablero-texto); }
.equipo-boton.es-claro:hover { background: color-mix(in srgb, var(--tablero-texto) 8%, transparent); }
/* Sobre la pared, la acción principal va llena, con el color del texto de la pared. */
.equipo-boton.es-papel { border-color: transparent; background: var(--tablero-texto); color: var(--fondo); }
.equipo-boton.es-papel:hover { background: color-mix(in srgb, var(--tablero-texto) 85%, var(--fondo)); }
.equipo-boton:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.cred-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }

/* ---------- Las credenciales colgando ---------- */

/* Una sola cuerda: las credenciales van en una fila que se desplaza hacia el lado (con el dedo, la rueda, las flechas o
   arrastrando con el mouse, en tendedero.js). Llega hasta los bordes del contenido (--orilla, el margen de <main>), arriba
   deja lugar para las esquinas de las credenciales que se balancean y abajo, para su sombra. */
.colgador {
  --hueco: 3rem;
  --cuerda: oklch(0.55 0.08 285 / 0.65);
  display: flex;
  gap: var(--hueco);
  margin: 0.6rem calc(var(--orilla) * -1) 0;
  padding: 2.6rem var(--orilla) 3rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--orilla);
  scrollbar-width: none;
  cursor: grab;
}
/* El fundido en las orillas, solo si hay credenciales fuera de la vista (tendedero.js pone .es-desborda): si caben todas,
   no corta a la primera cuando se balancea. */
.colgador.es-desborda {
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--orilla), #000 calc(100% - var(--orilla)), transparent);
  mask: linear-gradient(90deg, transparent, #000 var(--orilla), #000 calc(100% - var(--orilla)), transparent);
}
/* Si sobra espacio a la derecha, la cuerda sigue recta hasta el borde: un relleno después de la última credencial que
   crece con el espacio libre. Con credenciales fuera de la vista no existe: sus márgenes negativos acortarían el final. */
.colgador::after { content: ""; flex: 1 0 0; align-self: flex-start; height: 2.2px; margin: 2px calc(var(--orilla) * -1) 0 calc(var(--hueco) / -2); background: var(--cuerda); pointer-events: none; }
.colgador.es-desborda::after { display: none; }
.colgador::-webkit-scrollbar { display: none; }
.colgador.es-arrastrando { cursor: grabbing; user-select: none; }
.colgador > .cuelga { flex: 0 0 15rem; }
/* Los extremos de la cuerda llegan hasta los bordes. */
.colgador > .cuelga:first-child::before { left: calc(var(--orilla) * -1); }
.colgador > .cuelga:last-child::before { right: calc(var(--orilla) * -1); }
/* El tendedero: la cuerda amarrada a dos postes, que son las flechas (solo si hay credenciales fuera de la vista). Los
   postes van en las orillas, a la altura de la cuerda, con su palo hacia abajo. */
.tendedero { --orilla: clamp(1rem, 3vw, 2.5rem); --cuerda: oklch(0.55 0.08 285 / 0.65); position: relative; }
.poste {
  position: absolute;
  top: 1.95rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 2px solid var(--cuerda);
  border-radius: 50%;
  background: var(--fondo);
  color: var(--tablero-texto);
  cursor: pointer;
}
.poste::after { content: ''; position: absolute; top: 100%; left: 50%; width: 4px; height: 1.6rem; margin-left: -2px; border-radius: 2px; background: color-mix(in srgb, var(--cuerda) 60%, transparent); }
.poste.es-izquierda { left: calc(var(--orilla) * -1 + 0.3rem); }
.poste.es-derecha { right: calc(var(--orilla) * -1 + 0.3rem); }
.poste:hover:not(:disabled) { background: color-mix(in srgb, var(--tablero-texto) 8%, var(--fondo)); }
.poste:disabled { opacity: 0.4; cursor: default; }
.poste:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.tendedero-pista { margin: -2.2rem 0 0; color: var(--tablero-suave); font-size: 0.8rem; text-align: right; }
.es-espejo { transform: scaleX(-1); }
html[data-theme="dark"] .colgador, html[data-theme="dark"] .tendedero { --cuerda: rgb(242 239 230 / 0.5); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .colgador, html:not([data-theme]) .tendedero { --cuerda: rgb(242 239 230 / 0.5); } }
/* El tendedero: cada fila cuelga de una cuerda. Cada credencial dibuja su tramo, que pasa por encima del hueco hasta la
   mitad del de al lado (así los tramos se juntan en una sola cuerda) y se hunde al centro, donde la tira su peso. */
.cuelga { position: relative; display: flex; justify-content: center; min-width: 0; }
.cuelga::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--hueco) / -2);
  right: calc(var(--hueco) / -2);
  height: 0.8rem;
  background: var(--cuerda);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q32 3 50 10 Q68 3 100 2' fill='none' stroke='black' stroke-width='2.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q32 3 50 10 Q68 3 100 2' fill='none' stroke='black' stroke-width='2.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
/* Lo que cuelga (pinza, cinta, broche y credencial) parte donde se hunde la cuerda, ladeado según el bot. Es un péndulo:
   tendedero.js le pone el ángulo en cada cuadro (al pasar el puntero se endereza). La cuerda no se ladea: va en
   .cuelga, que queda quieta. */
.cuelga-cuerpo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 0.55rem;
  transform: rotate(var(--ladeo, 0deg));
  transform-origin: top center;
  will-change: transform;
}
/* La pinza de ropa que sujeta la cinta a la cuerda. */
.cuelga-cuerpo::before { content: ''; position: absolute; top: -0.45rem; left: 50%; z-index: 1; width: 0.55rem; height: 1.15rem; margin-left: -0.275rem;
  border-radius: 0.15rem; background: #e8d6b0; box-shadow: inset -2px 0 0 #00000026, 0 1px 2px #00000040; }
.cinta { width: 1.1rem; height: 2.6rem; background: var(--cinta, #ffffff59); box-shadow: inset -3px 0 0 #00000024; }
.broche { width: 2rem; height: 0.9rem; margin-top: -0.2rem; border-radius: 0.25rem; background: #c9ccd8; box-shadow: inset 0 -2px 0 #00000033; }
.cred {
  position: relative;
  width: 100%;
  margin-top: -0.25rem;
  padding: 0.9rem 0.95rem 1rem;
  border-radius: 0.9rem;
  background: var(--papel);
  color: var(--tinta-e);
  box-shadow: var(--sombra-cred);
}
.ranura { display: block; width: 2.4rem; height: 0.45rem; margin: 0 auto 0.75rem; border-radius: 9px; background: var(--fondo); opacity: 0.85; }
/* Solo la versión: la empresa ya está en tu credencial del menú. */
.cred-version { margin: 0; color: var(--gris-e); font-size: 0.7rem; text-align: right; }
/* La foto: el flujo del bot, sobre el color de su cinta. */
.cred-foto { display: grid; place-items: center; height: 6.6rem; margin: 0.45rem 0 0.75rem; padding: 0.55rem; border-radius: 0.5rem; background: var(--cinta, #dfe2ee); }
.cred-nombre { margin: 0; overflow: hidden; color: var(--tinta-e); font-family: var(--fuente-titulos); font-size: 1.15rem; font-weight: 750; line-height: 1.2;
  text-overflow: ellipsis; white-space: nowrap; }
.cred-abrir { max-width: 100%; padding: 0; overflow: hidden; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cred-abrir::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cred-abrir:focus-visible { outline: none; }
.cred:has(.cred-abrir:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.cred-cargo { display: -webkit-box; margin: 0.3rem 0 0; overflow: hidden; color: #474b63; font-size: 0.8rem; line-height: 1.38; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.cred-turno { display: flex; align-items: center; gap: 0.45rem; margin: 0.75rem 0 0; font-size: 0.8rem; font-weight: 650; }
.cred-turno i { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--luz, var(--luz-descanso)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--luz, var(--luz-descanso)) 25%, transparent); }
.es-activo { --luz: var(--luz-turno); }
.es-cambios { --luz: var(--luz-cambios); }
.es-inactivo { --luz: var(--luz-descanso); }
/* «No revisa lo que manda»: sobre el velo que abre la credencial, para que el clic lleve al interruptor. */
.cred-aviso { position: relative; z-index: 1; display: block; margin: 0.5rem 0 0; padding: 0.2rem 0.5rem; border: 0; border-radius: 0.35rem;
  background: #fff1cc; color: #7a4f00; font: inherit; font-size: 0.72rem; font-weight: 650; text-align: left; }
button.cred-aviso { cursor: pointer; }
button.cred-aviso:hover { background: #ffe7a6; }
button.cred-aviso:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.cred-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid color-mix(in srgb, var(--tinta-e) 12%, transparent); }
.cred-cifras p { margin: 0; color: var(--gris-e); font-size: 0.68rem; line-height: 1.25; }
.cred-cifras b { display: block; color: var(--tinta-e); font-size: 1.05rem; font-stretch: 90%; font-weight: 750; font-variant-numeric: tabular-nums; }
/* Sin atenciones ni minutos, una sola línea en vez de dos ceros. */
.cred-cifras.es-nada { display: block; margin-bottom: 0; color: var(--gris-e); font-size: 0.8rem; }
/* De descanso: un sello de goma ladeado encima de la foto, y la foto un poco apagada. La credencial no se pone gris:
   con todo el equipo descansando, la pantalla entera quedaba muerta. El filtro va en la foto misma porque al abrir el
   bot la View Transition la captura sola, sin lo que tenga la credencial. */
.cuelga.es-inactivo .cred-foto { filter: saturate(0.55); }
.cuelga.es-inactivo .cred-foto .mini { opacity: 0.6; }
.sello {
  position: absolute;
  top: 4.2rem;
  left: 50%;
  z-index: 1;
  padding: 0.2rem 0.7rem;
  border: 3px double #c8323f;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--papel) 60%, transparent);
  color: #c8323f;
  font-size: 1rem;
  font-stretch: 115%;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-9deg);
  opacity: 0.88;
  pointer-events: none;
}

/* ---------- «Sumar un bot»: una credencial en blanco, de línea punteada ---------- */

.es-sumar .cinta { background: color-mix(in srgb, var(--tablero-texto) 25%, transparent); }
.es-sumar .cred { display: grid; align-content: center; min-height: 17rem; border: 2px dashed color-mix(in srgb, var(--tablero-texto) 45%, transparent); background: transparent; color: var(--tablero-texto); box-shadow: none; }
.sumar-boton { display: grid; place-items: center; gap: 0.5rem; width: 100%; height: 100%; min-height: 14rem; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  font-size: 1rem; font-weight: 650; cursor: pointer; }
.sumar-boton span { font-size: 2.2rem; font-weight: 400; line-height: 1; }
.sumar-form { display: grid; gap: 0.9rem; }
.sumar-form label { display: grid; gap: 0.4rem; margin: 0; color: var(--tablero-suave); font-size: 0.85rem; }
.sumar-form input { width: 100%; margin: 0; padding: 0.55rem 0.7rem; border: 1px solid color-mix(in srgb, var(--tablero-texto) 25%, transparent); border-radius: 0.5rem; background: var(--papel); color: var(--tinta-e); font: inherit; font-size: 1rem; }
.sumar-form .equipo-boton { border-color: color-mix(in srgb, var(--tablero-texto) 40%, transparent); color: var(--tablero-texto); }
.sumar-form .equipo-boton.es-principal { border-color: transparent; background: var(--tablero-texto); color: var(--fondo); }

/* ---------- Las plantillas: hojas en una grilla, sobre la misma pared ---------- */

.plantillas { --orilla: clamp(1rem, 3vw, 2.5rem); margin-top: 3.5rem; color: var(--tablero-texto); }
.plantillas-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.plantillas-cabeza h3 { margin: 0; color: var(--tablero-texto); font-family: var(--fuente-titulos); font-size: 1.7rem; font-stretch: 118%; font-weight: 800; }
.plantillas-bajada { max-width: 56ch; margin: 0.4rem 0 0; color: var(--tablero-suave); font-size: 0.95rem; }
#import-result { margin: 0 0 1.2rem; color: var(--tablero-suave); }
.plantillas-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 1.6rem 1.4rem; padding-bottom: 1rem; }
/* Las hojas son hijas directas de la grilla (la lista no arma su propia caja). */
.mesa { display: contents; }

.hoja {
  --hoja: #fdfcf8;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  box-sizing: border-box;
  padding: 0.85rem 0.85rem 0.7rem;
  background: var(--hoja);
  color: var(--tinta-e);
  box-shadow: 0 1px 1px #0000001f, 0 10px 14px -10px #3b2a0f80;
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
/* La esquina doblada: la mitad de arriba es la pared (la hoja ya no está ahí) y la de abajo, el doblez. */
.hoja::before { content: ''; position: absolute; top: 0; right: 0; width: 1.4rem; height: 1.4rem; background: linear-gradient(45deg, #e6dfcd 50%, var(--fondo) 50%); box-shadow: -1px 1px 2px #0000001f; }
/* Con casos de prueba: hojas grapadas atrás (una por caso, hasta tres) y la grapa arriba a la izquierda. */
.hoja.es-grapada {
  box-shadow: 4px 5px 0 -1px #f2eddf, 4px 5px 0 0 #0000001c,
    calc(var(--hojas-atras, 1) * 4px) calc(var(--hojas-atras, 1) * 5px) 0 -1px #ebe4d3, calc(var(--hojas-atras, 1) * 4px) calc(var(--hojas-atras, 1) * 5px) 0 0 #0000001c,
    0 12px 16px -10px #3b2a0f80;
}
.hoja.es-grapada::after { content: ''; position: absolute; top: 0.55rem; left: 0.45rem; width: 1.3rem; height: 0.22rem; border-radius: 2px; background: #9aa0aa; box-shadow: 0 1px 0 #00000033; transform: rotate(-32deg); }
/* Al pasar el puntero (o con el foco), la hoja sube un poco y su sombra se aleja. */
@media (hover: hover) and (pointer: fine) {
  .hoja:not(.es-vacia):hover { transform: translateY(-3px); box-shadow: 0 1px 1px #0000001f, 0 18px 22px -14px #3b2a0f8c; }
}
.hoja:not(.es-vacia):focus-within { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .hoja { transition: none; } }
/* El flujo impreso, sobre papel cuadriculado. */
.hoja-dibujo { display: grid; place-items: center; height: 4.2rem; margin-bottom: 0.7rem; padding: 0.5rem; border: 1px solid #15172b1f;
  background: linear-gradient(#15172b0d 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, #15172b0d 1px, transparent 1px) 0 0 / 12px 12px; }
/* Impreso en blanco y negro: el nodo de IA (blanco en la credencial) va gris azulado para que se vea sobre el papel. */
.hoja-dibujo .mini-nodo.es-ai { fill: #dfe3ff; stroke: color-mix(in srgb, #15172b 45%, transparent); }
.hoja-titulo { margin: 0; overflow: hidden; color: var(--tinta-e); font-family: var(--fuente-titulos); font-size: 0.95rem; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.hoja-texto { display: -webkit-box; margin: 0.3rem 0 0; overflow: hidden; color: #474b63; font-size: 0.74rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hoja-pie { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; margin: auto 0 0.55rem; padding-top: 0.6rem; color: var(--gris-e); font-size: 0.7rem; }
.hoja .cred-acciones .equipo-boton.es-principal { flex: 1; }
.hoja .boton-redondo { border-color: color-mix(in srgb, var(--tinta-e) 20%, transparent); background: transparent; color: var(--tinta-e); }
.hoja .boton-redondo:hover:not(:disabled) { background: color-mix(in srgb, var(--tinta-e) 7%, transparent); }
.hoja button:disabled { cursor: default; }
/* La hoja de ejemplo: un post-it amarillo pegado arriba lo dice, y sus botones (desactivados) se ven más tenues. */
.postit { position: absolute; top: -1rem; right: -1.6rem; z-index: 2; width: 7.4rem; margin: 0; padding: 0.6rem 0.65rem 0.8rem; background: #ffe27a; color: #3a2f1f;
  font-size: 0.76rem; font-weight: 650; line-height: 1.3; box-shadow: 0 8px 10px -7px #00000080; transform: rotate(7deg); }
.hoja.es-ejemplo .cred-acciones { opacity: 0.55; }
/* Sin plantillas: el contorno de una hoja en blanco, con el texto. */
.hoja.es-vacia { justify-content: center; gap: 0.6rem; border: 2px dashed color-mix(in srgb, #3a2f1f 35%, transparent); background: transparent; color: #6b5a3e; box-shadow: none; text-align: center; }
.hoja.es-vacia::before { display: none; }
.hoja.es-vacia p { margin: 0; font-size: 0.85rem; line-height: 1.4; }
.hoja.es-vacia p:first-child { color: #3a2f1f; font-weight: 700; font-size: 0.95rem; }
html[data-theme="dark"] .hoja.es-vacia { border-color: #f3ead880; color: #e6d8bc; }
html[data-theme="dark"] .hoja.es-vacia p:first-child { color: #f3ead8; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .hoja.es-vacia { border-color: #f3ead880; color: #e6d8bc; } html:not([data-theme]) .hoja.es-vacia p:first-child { color: #f3ead8; } }

/* ---------- El flujo dentro de la foto (miniatura.js) ---------- */

.mini { width: 100%; height: 100%; }
.mini-arista { fill: none; stroke: color-mix(in srgb, #15172b 55%, transparent); stroke-width: 1.5; }
.mini-arista.es-sub { stroke-dasharray: 3 3; stroke-width: 1; }
.mini-nodo { stroke-width: 1.3; }
.mini-nodo.es-trigger { fill: #15172b; }
.mini-nodo.es-ai { fill: #ffffff; }
.mini-nodo.es-flow { fill: color-mix(in srgb, #15172b 35%, transparent); }
.mini-nodo.es-action { fill: color-mix(in srgb, #ffffff 70%, transparent); stroke: color-mix(in srgb, #15172b 50%, transparent); }
.mini-nodo.es-sub { fill: #15172b; }
.mini-vacia { color: color-mix(in srgb, #15172b 60%, transparent); font-size: 0.78rem; }

/* ---------- Pantallas angostas ---------- */

@media (max-width: 40rem) {
  .plantillas-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 0.9rem; }
  .colgador { --hueco: 1.1rem; }
  .colgador > .cuelga { flex-basis: min(15rem, 72vw); }
  /* Más derechas, para que no se salgan del borde. */
  .cuelga-cuerpo { transform: rotate(calc(var(--ladeo, 0deg) * 0.4)); }
  .cred { padding: 0.75rem 0.75rem 0.85rem; }
  .cred-foto { height: 5.2rem; }
}
@media (max-width: 26rem) {
  .plantillas-grilla { grid-template-columns: 1fr; }
}

/* ---------- Compartido con la barra del editor del bot (no cambia) ---------- */

/* Estado: activo con el color de la marca, cambios sin activar con el acento, inactivo solo con el borde. */
.auto-estado { flex: none; padding: 0.15rem 0.6rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.74rem; font-weight: 500; }
.auto-estado.es-activo { background: var(--texto-fuerte); color: var(--superficie); }
.auto-estado.es-cambios { background: var(--activo); color: var(--texto); }
.auto-estado.es-inactivo { border-color: var(--borde); color: var(--texto-suave); }

.editor-barra :is(.boton-primario, .boton-suave) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.editor-barra .boton-primario { background: var(--texto-fuerte); color: var(--superficie); }
.editor-barra .boton-suave { border-color: var(--borde); background: var(--superficie); color: var(--texto); }
.editor-barra .boton-suave:hover { background: var(--superficie-baja); }
.editor-barra .boton-suave:focus-within { outline: 2px solid var(--foco); }
.boton-redondo {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto-fuerte);
  cursor: pointer;
}
button.boton-redondo:hover { background: var(--superficie-baja); }

/* ---------- Abrir un bot: la pantalla se acerca a su foto (zoomIntoPhoto, espacio.js) ---------- */

/* espacio.css deja el root sin animación (por la ola del tema); aquí, solo con .zoom-bot, la lista vieja se agranda hacia
   la foto apretada (--zoom-x, --zoom-y) y se desvanece, como una cámara que se acerca; la foto crece y se endereza hasta
   ser el tablero; y la barra del editor aparece al final, cuando ya se sabe dónde se está. Medio segundo: es un cambio de
   pantalla completa que se ve unas cuantas veces al día; la foto viaja con ease-in-out (ya estaba en pantalla) y lo que
   aparece frena al llegar. */
html.zoom-bot::view-transition-old(root) {
  animation: zoom-acercar 500ms cubic-bezier(0.77, 0, 0.175, 1) both;
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}
html.zoom-bot::view-transition-new(root) { animation: zoom-aparecer 500ms cubic-bezier(0.23, 1, 0.32, 1) both; }
html.zoom-bot::view-transition-group(foto-bot) { animation-duration: 500ms; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
/* La foto y el tablero tienen otras proporciones: cada imagen llena el grupo recortándose, sin deformarse. */
html.zoom-bot::view-transition-old(foto-bot), html.zoom-bot::view-transition-new(foto-bot) { height: 100%; object-fit: cover; animation-duration: 500ms; }
@keyframes zoom-acercar { to { transform: scale(2.4); opacity: 0; } }

/* Volver del bot a la lista (zoomOutToPhoto): lo inverso. El editor se desvanece rápido, el tablero se encoge hasta la foto
   de la credencial y la lista llega agrandada hacia esa foto y retrocede a su tamaño, como una cámara que se aleja.
   400 ms, un poco menos que al entrar: salir es más rápido. El tablero viaja con ease-in-out (ya estaba en pantalla) y
   la lista frena al llegar. */
html.zoom-salir::view-transition-old(root) { animation: zoom-desvanecer 220ms cubic-bezier(0.23, 1, 0.32, 1) both; }
html.zoom-salir::view-transition-new(root) {
  animation: zoom-alejar 400ms cubic-bezier(0.23, 1, 0.32, 1) both;
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 40%);
}
html.zoom-salir::view-transition-group(foto-bot) { animation-duration: 400ms; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
html.zoom-salir::view-transition-old(foto-bot), html.zoom-salir::view-transition-new(foto-bot) { height: 100%; object-fit: cover; animation-duration: 400ms; }
@keyframes zoom-desvanecer { to { opacity: 0; } }
@keyframes zoom-alejar { from { transform: scale(2.4); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes zoom-aparecer { 0%, 55% { opacity: 0; } to { opacity: 1; } }

/* ---------- Pared con luces y credenciales de vidrio ----------
   Para que entone con el tablero del bot (styles.css): la pared son sus mismas luces (--luz-*, --lienzo-base de
   espacio.css) con su trama de puntos, y las credenciales, «Sumar un bot» y las plantillas son vidrio esmerilado. La foto
   del flujo sigue del color de la cinta, ahora un poco translúcida. Mientras se arrastra la cuerda el desenfoque se apaga,
   como al mover el tablero. */
.autos {
  background:
    radial-gradient(color-mix(in srgb, var(--tablero-texto) 13%, transparent) 0.9px, transparent 1px) 0 0 / 18px 18px,
    radial-gradient(55% 60% at 10% 8%, var(--luz-1, oklch(0.84 0.09 295 / 0.65)), transparent 70%),
    radial-gradient(45% 55% at 92% 18%, var(--luz-2, oklch(0.87 0.09 175 / 0.6)), transparent 70%),
    radial-gradient(60% 45% at 55% 100%, var(--luz-3, oklch(0.87 0.08 35 / 0.5)), transparent 70%),
    var(--fondo);
}
.cred {
  --vidrio: rgb(255 255 255 / 0.48);
  border: 1px solid rgb(255 255 255 / 0.85);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.cred-foto { background: color-mix(in oklch, var(--cinta, #dfe2ee) 78%, transparent); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
.ranura { background: color-mix(in srgb, var(--tinta-e) 14%, transparent); opacity: 1; }
.cred-cargo, .hoja-texto { color: var(--gris-e); }
.colgador.es-arrastrando .cred { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* «Sumar un bot»: la credencial en blanco, de vidrio con borde punteado. */
.es-sumar .cred { background: color-mix(in srgb, var(--vidrio) 55%, transparent); }
/* Las plantillas: hojas de vidrio con el flujo en el violeta del tráfico, sobre una trama de puntos. */
.hoja {
  --hoja: rgb(255 255 255 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.85);
  border-radius: 0.8rem;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 26px -16px oklch(0.4 0.12 290 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.8);
}
.hoja::before { display: none; }
.hoja.es-grapada { box-shadow: 5px 6px 0 -1px rgb(255 255 255 / 0.35), 0 12px 26px -16px oklch(0.4 0.12 290 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.8); }
@media (hover: hover) and (pointer: fine) {
  .hoja:not(.es-vacia):hover { box-shadow: 0 20px 30px -16px oklch(0.4 0.12 290 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.8); }
}
.hoja.es-vacia { border: 2px dashed color-mix(in srgb, var(--tablero-texto) 35%, transparent); color: var(--tablero-suave); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hoja.es-vacia p:first-child { color: var(--tablero-texto); }
.hoja-dibujo { border: 0; border-radius: 0.55rem; background: rgb(255 255 255 / 0.4) radial-gradient(color-mix(in srgb, var(--tinta-e) 14%, transparent) 0.8px, transparent 0.9px) 0 0 / 8px 8px; }
.hoja-dibujo .mini-arista { stroke: color-mix(in oklch, var(--trafico, oklch(0.5 0.2 278)) 75%, transparent); }
.hoja-dibujo .mini-nodo, .hoja-dibujo .mini-nodo.es-ai { fill: rgb(255 255 255 / 0.85); stroke: var(--trafico, oklch(0.5 0.2 278)); }
.hoja-dibujo .mini-nodo.es-trigger, .hoja-dibujo .mini-nodo.es-sub { fill: var(--trafico, oklch(0.5 0.2 278)); }
.hoja .cred-acciones .equipo-boton.es-principal { background: var(--trafico, oklch(0.5 0.2 278)); color: #fff; }
/* De noche: vidrio oscuro con texto crema. */
html[data-theme="dark"] :is(.cred, .hoja) { --vidrio: rgb(255 255 255 / 0.09); --hoja: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.22); }
html[data-theme="dark"] .cred-aviso { background: rgb(240 168 0 / 0.18); color: #ffd27a; }
html[data-theme="dark"] button.cred-aviso:hover { background: rgb(240 168 0 / 0.28); }
html[data-theme="dark"] .cred-foto { background: color-mix(in oklch, var(--cinta, #dfe2ee) 58%, transparent); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
html[data-theme="dark"] .hoja { box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.12); }
html[data-theme="dark"] .hoja-dibujo { background-color: rgb(255 255 255 / 0.06); }
html[data-theme="dark"] .hoja-dibujo .mini-nodo, html[data-theme="dark"] .hoja-dibujo .mini-nodo.es-ai { fill: rgb(255 255 255 / 0.12); }
html[data-theme="dark"] .hoja .cred-acciones .equipo-boton.es-principal { color: #15132b; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) :is(.cred, .hoja) { --vidrio: rgb(255 255 255 / 0.09); --hoja: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.22); }
  html:not([data-theme]) .cred-aviso { background: rgb(240 168 0 / 0.18); color: #ffd27a; }
  html:not([data-theme]) button.cred-aviso:hover { background: rgb(240 168 0 / 0.28); }
  html:not([data-theme]) .cred-foto { background: color-mix(in oklch, var(--cinta, #dfe2ee) 58%, transparent); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
  html:not([data-theme]) .hoja { box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.12); }
  html:not([data-theme]) .hoja-dibujo { background-color: rgb(255 255 255 / 0.06); }
  html:not([data-theme]) .hoja-dibujo .mini-nodo, html:not([data-theme]) .hoja-dibujo .mini-nodo.es-ai { fill: rgb(255 255 255 / 0.12); }
  html:not([data-theme]) .hoja .cred-acciones .equipo-boton.es-principal { color: #15132b; }
}
@media (prefers-reduced-transparency: reduce) {
  .cred, .hoja { --vidrio: var(--superficie); --hoja: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Las flechas del tendedero: más discretas (vidrio tenue, sin el palo del poste) y a media altura de las credenciales,
   donde está la vista, no en la cuerda. La mitad de las credenciales: bajo la cuerda y sus cintas (unos 6,6rem) y sobre
   el relleno de abajo del colgador (3rem). */
.poste {
  top: calc(50% + 1.8rem);
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgb(255 255 255 / 0.7);
  background: rgb(255 255 255 / 0.35);
  color: var(--tablero-suave);
  box-shadow: 0 6px 16px -10px oklch(0.4 0.12 290 / 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0.7;
  transform: translateY(-50%);
  transition: opacity 0.2s, background-color 0.2s;
}
.poste::after { display: none; }
.poste:hover:not(:disabled), .poste:focus-visible { opacity: 1; background: rgb(255 255 255 / 0.6); color: var(--tablero-texto); }
.poste:disabled { opacity: 0.25; }
html[data-theme="dark"] .poste { border-color: rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.08); }
html[data-theme="dark"] .poste:hover:not(:disabled) { background: rgb(255 255 255 / 0.16); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .poste { border-color: rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.08); }
  html:not([data-theme]) .poste:hover:not(:disabled) { background: rgb(255 255 255 / 0.16); }
}