/* ══════════════════════════════════════════════════════════════════════
   LA UI DEL PRODUCTO, DENTRO DE UNA LANDING
   ----------------------------------------------------------------------
   Copiado de ~/Marketing-2026/brand/sytex-ui (kit sellado contra el repo
   Sytex/sytex). Las medidas NO son estimadas: barra de 44, fila de 32,
   texto de 12, gap de 8, radios 8/12 — están en el SPEC.md del kit y un
   mockup que se aparta de ellas se nota falso.

   Los tokens van sobre .sy y NO sobre :root, a propósito: la landing define
   sus propios --syt-* con los grises verdosos del sistema de marketing
   (#2d3c3e, #d6e2e4), que son los del repo archivado. El producto hoy usa
   grises puros. Si estos tokens se movieran a :root, el mockup heredaría
   los verdosos y dejaría de parecerse a la app.

   La tipografía del producto es Nunito, no Inter.
   ══════════════════════════════════════════════════════════════════════ */

.sy{
  --syt-accent-50:#f1f2fe; --syt-accent-200:#cacdfe; --syt-accent-500:#606ff7;
  --syt-accent-on-tint:#606ff7; --syt-alert-on-tint:#f44336;
  --syt-bg-color:#fff; --syt-canvas-bg-color:#f5f5f5; --syt-border-color:#dddddd;
  --syt-font-color:#363636; --syt-faded-font-color:#9c9c9c; --syt-button-font-color:#6b6b6b;
  --syt-neutral-50:#f5f5f5; --syt-neutral-100:#ededed; --syt-neutral-200:#d2d2d2;
  --syt-neutral-300:#9c9c9c; --syt-neutral-400:#696969;
  --syt-primary-500:#00bcd4; --syt-color-green:#4caf50; --syt-color-orange:#ffa825;
  --syt-legacy-tint-1:#8faab1; --syt-menu-active-bg:#d9e0ea;
  --syt-box-shadow-low:lch(0 0 0 / 0.05) 0px 3px 6px -2px, lch(0 0 0 / 0.08) 0px 1px 1px;
  font-family:Nunito,-apple-system,sans-serif;color:#363636;font-weight:400;
  letter-spacing:normal;text-align:left;
}
.sy *{box-sizing:border-box}

/* ---- shell: la ventana de la app ------------------------------------- */
.sy-shell { display:grid; grid-template-columns:auto 1fr; background:var(--syt-canvas-bg-color);
  border:1px solid var(--syt-border-color); border-radius:10px; overflow:hidden; }
.sy-topbar { grid-column:1/-1; height:44px; display:flex; align-items:center; gap:10px;
  padding:0 12px; background:var(--syt-bg-color); border-bottom:1px solid var(--syt-border-color); }
.sy-topbar .sy-iso { width:26px; height:26px; }
.sy-topbar .sy-tabs { display:flex; gap:4px; margin-left:8px; }
.sy-tab { height:32px; display:flex; align-items:center; gap:8px; padding:0 12px;
  border-radius:6px; font-size:12.5px; color:var(--syt-faded-font-color); }
.sy-tab[aria-current] { background:var(--syt-accent-50); color:var(--syt-accent-500); font-weight:600; }
.sy-tools { margin-left:auto; display:flex; gap:4px; }

/* ---- rail lateral ----------------------------------------------------- */
.sy-rail { width:214px; padding:8px; background:var(--syt-bg-color);
  border-right:1px solid var(--syt-border-color); display:flex; flex-direction:column; gap:2px; }
.sy-rail-item { min-height:30px; display:flex; align-items:center; gap:9px; padding:5px 9px 6px;
  border-radius:4px; font-size:12.8px; color:var(--syt-faded-font-color); }
.sy-rail-item[aria-current] { background:var(--syt-menu-active-bg,var(--syt-accent-50));
  color:var(--syt-accent-500); font-weight:600; }
.sy-rail-item .sy-i { width:16px; }

/* ---- contenido -------------------------------------------------------- */
.sy-body { padding:16px; display:flex; flex-direction:column; gap:16px; }
.sy-panel { background:var(--syt-bg-color); border:1px solid var(--syt-border-color);
  border-radius:8px; overflow:hidden; }
.sy-panel-head { min-height:32px; display:flex; align-items:center; gap:8px; padding:8px 12px;
  border-bottom:1px solid var(--syt-border-color); font-size:12px; font-weight:600; }
.sy-panel-head .sy-count { margin-left:auto; color:var(--syt-faded-font-color); font-weight:400; }

/* ---- fila de lista (tareas) ------------------------------------------- */
.sy-row { min-height:32px; display:flex; align-items:center; gap:8px; padding:8px 12px;
  border-bottom:1px solid var(--syt-border-color); font-size:12px; }
.sy-row:last-child { border-bottom:0; }
.sy-row-mark { width:44px; height:44px; flex:none; border-radius:6px; display:grid;
  place-items:center; background:var(--syt-accent-50); color:var(--syt-accent-500);
  font-size:11px; font-weight:700; }
.sy-row-txt { min-width:0; }
.sy-row-title { font-size:14px; font-weight:600; }
.sy-row-sub { font-size:11px; color:var(--syt-faded-font-color); }
.sy-row .sy-pill { margin-left:auto; }
.sy-row[data-blocked] { border:1px dashed var(--syt-border-color); opacity:.6; }

/* ---- pildora de estado ------------------------------------------------ */
/* OJO: el color NO es una paleta de marketing. Sale de la base de cada
   organizacion (--status-color, inline en el template; fallback #909298).
   Los nombres tampoco son fijos: cada org configura su flujo. Los de
   data/statuses.json son los reales de la org 353. Medidas de sytex-status.css. */
.sy-pill { min-height:28px; max-height:28px; max-width:200px; display:inline-flex;
  align-items:center; gap:6px; padding:6px 12px; border-radius:14px;
  font-size:12px; font-weight:100; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--status-color,var(--syt-legacy-tint-1,#909298)); color:#fff; }

/* En dark la pildora NO es un solido de color (SYT-11347: los colores
   arbitrarios de la DB no garantizan contraste). Va neutra, y el color
   se muda a un bullet de 8px. */
:root[data-theme-family='dark'] .sy-pill {
  background:rgba(255,255,255,.09); color:#e9edf0; font-weight:600; }
:root[data-theme-family='dark'] .sy-pill::before {
  content:''; width:8px; min-width:8px; height:8px; border-radius:50%;
  background:var(--status-color,#909298); }

/* La paleta real, la que devuelve la API */
.sy-pill[data-status=initial]   { --status-color:#909298; } /* Open, To confirm, Active */
.sy-pill[data-status=progress]  { --status-color:#2196f3; } /* In progress */
.sy-pill[data-status=review]    { --status-color:#00bcd4; } /* To review */
.sy-pill[data-status=submitted] { --status-color:#ffa825; } /* Submitted, On hold */
.sy-pill[data-status=snags]     { --status-color:#b5cc26; } /* Approved/Completed with snags */
.sy-pill[data-status=done]      { --status-color:#4caf50; } /* Approved, Completed, Confirmed */
.sy-pill[data-status=rejected]  { --status-color:#f44336; } /* Rejected, Cancelled */

/* ---- tabla ------------------------------------------------------------ */
.sy-table { width:100%; border-collapse:collapse; font-size:14px; }
.sy-table th { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--syt-faded-font-color); text-align:left; padding:8px 12px;
  border-bottom:1px solid var(--syt-border-color); }
.sy-table td { padding:8px 12px; border-bottom:1px solid var(--syt-border-color); }
.sy-table td.num, .sy-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
/* codigo, cantidad y estado a ancho de contenido; la descripcion toma el resto */
.sy-table td:not(.desc), .sy-table th:not(.desc) { white-space:nowrap; width:1%; }
.sy-table td.desc, .sy-table th.desc { width:auto; }

/* ---- board de tareas (FRONT NUEVO) ------------------------------------ */
/* Copiado de front/src/app/ui/windows/task-search-window/task-board/.
   Board y columna comparten canvas-bg: NO hay separadores entre columnas. */
.sy-board { flex:1; display:flex; gap:8px; min-height:0; padding:8px; border-radius:8px;
  background:var(--syt-canvas-bg-color); overflow:auto; }
/* el host fija los 280; el padding va ADENTRO (border-box), si no la columna mide 296 */
.sy-col { box-sizing:border-box; flex:0 0 280px; min-width:0; display:flex;
  flex-direction:column; gap:8px; padding:0 8px 8px; border-radius:8px;
  background:var(--syt-canvas-bg-color); }
.sy-col * { box-sizing:border-box; }
.sy-col-head { display:flex; flex-direction:column; gap:8px; margin:0 -8px;
  padding:8px 8px 4px; background:inherit; }
.sy-col-header { display:flex; gap:8px; align-items:center; min-height:24px; white-space:nowrap; }
.sy-col-title { display:flex; gap:4px; align-items:center; font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; }
.sy-col-title .sy-i { font-size:12px; }          /* fa-circle-small solid, color del estado */
.sy-col-count { font-size:12px; color:var(--syt-faded-font-color); }
.sy-col-empty { padding:12px 8px; border:1px dashed var(--syt-border-color); border-radius:8px;
  font-size:12px; color:var(--syt-faded-font-color); text-align:center; }

/* app-tag: el chip gris del producto */
.sy-tag { display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:4px 6px; min-width:20px; min-height:20px; border-radius:6px; line-height:1;
  font-size:12px; font-weight:400;
  background:var(--syt-neutral-100,#ededed); color:var(--syt-button-font-color,#6b6b6b); }
.sy-tag.light   { background:var(--syt-neutral-50,#f5f5f5); color:var(--syt-neutral-400,#696969);
                  border:1px solid var(--syt-neutral-100,#ededed); }
.sy-tag.accent  { background:var(--syt-accent-200,#cacdfe); color:var(--syt-accent-on-tint,#404ecb); }
.sy-tag.small   { font-size:10px; padding:3px 5px; min-width:0; min-height:0; }

/* tarjeta */
.sy-card { display:flex; flex-direction:column; gap:8px; background:var(--syt-bg-color);
  border:1px solid var(--syt-border-color); border-radius:8px;
  box-shadow:var(--syt-box-shadow-low); font-size:12px; padding:8px; line-height:1;
  cursor:pointer; overflow:hidden; }
.sy-card-head { display:flex; align-items:flex-start; gap:8px; }
.sy-card-title { display:flex; flex-direction:column; align-items:flex-start; flex:1;
  min-width:0; gap:4px; line-height:1; }
.sy-card-code { font-size:11px; color:var(--syt-faded-font-color);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sy-card-name { font-size:14px; font-weight:600; }
.sy-card-av { width:20px; height:20px; min-width:20px; border-radius:50%; overflow:hidden;
  flex:none; box-shadow:0 0 0 1px var(--syt-neutral-100,#ededed); background-size:cover; }

/* Banda de relaciones. En produccion se ve como TEXTO PLANO atenuado con un
   bullet teal entre items — no como chips (verificado contra captura). Misma
   receta que la banda .dates del SCSS: content '•' en --syt-primary-500. */
.sy-relations { display:flex; flex-wrap:wrap; align-items:center; row-gap:4px;
  font-size:11px; color:var(--syt-faded-font-color); min-width:0; }
.sy-relations > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sy-relations > span:not(:first-child)::before { content:'•';
  color:var(--syt-primary-500,#00bcd4); font-size:12px; padding:0 4px; }

/* fila de atributos: una sola linea, se recorta */
.sy-attrs { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; overflow:hidden; }
.sy-attrs > * { flex-shrink:0; }
.sy-chip { display:flex; align-items:center; gap:4px; background:var(--syt-bg-color);
  border:1px solid var(--syt-neutral-50,#f5f5f5); border-radius:8px; padding:4px 6px;
  line-height:1; font-size:10px; min-width:22px; overflow:hidden; }
.sy-dur { background:var(--syt-bg-color); border:1px solid var(--syt-neutral-50,#f5f5f5);
  border-radius:8px; padding:4px 6px; line-height:1; font-size:10px;
  color:var(--syt-color-green,#4caf50); }
.sy-dur.alert .sy-d { color:var(--syt-font-color); }
.sy-dur.alert .sy-delta { color:var(--syt-alert-on-tint,#f44336); }
.sy-dur.warn  .sy-d { color:var(--syt-font-color); }
.sy-dur.warn  .sy-delta { color:var(--syt-color-orange,#ffa825); }
.sy-prio { padding:4px 6px; font-size:10px; border-radius:8px; color:#fff; }

/* ---- barra de filtros (FRONT NUEVO) ----------------------------------- */
/* Cada filtro tiene SU icono; salen de icons/task-filters.json, no a ojo. */
/* fila unica: los chips envuelven, el boton Buscar queda fijo a la derecha */
.sy-filterbar { display:flex; align-items:flex-start; gap:12px; padding:8px 0; }
.sy-filters { flex:1; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sy-fchip { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 10px;
  border:1px solid var(--syt-border-color); border-radius:8px; background:var(--syt-bg-color);
  font-size:13px; color:var(--syt-neutral-400,#696969); white-space:nowrap; }
.sy-fchip .sy-i { color:var(--syt-neutral-300,#9c9c9c); }
.sy-fchip .sy-x { color:var(--syt-neutral-200,#d2d2d2); cursor:pointer; }
.sy-fchip.is-input { color:var(--syt-neutral-300,#9c9c9c); min-width:170px; }
.sy-fchip.is-plain { border:0; }
.sy-search { flex:none; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px;
  border-radius:8px; background:var(--syt-primary-500,#00bcd4); color:#fff;
  font-size:13px; font-weight:600; }

/* ---- encabezado de ventana (FRONT NUEVO) ------------------------------- */
/* search-header.component.scss: titulo 16px peso 300, gap 12, icono 16 en primary-500 */
.sy-wtitle { display:flex; align-items:center; gap:12px; font-size:16px; font-weight:300;
  line-height:1; color:var(--syt-font-color); }
.sy-wtitle .sy-i { font-size:16px; color:var(--syt-primary-500,#00bcd4); }
.sy-wactions { margin-left:auto; display:flex; align-items:center; gap:16px;
  font-size:13px; color:var(--syt-neutral-400,#696969); }

/* ---- widget de dashboard ---------------------------------------------- */
.sy-kpi { background:var(--syt-bg-color); border:1px solid var(--syt-border-color);
  border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:4px; }
.sy-kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--syt-faded-font-color); }
.sy-kpi-value { font-size:24px; font-weight:700; }

/* ---- campo de formulario ---------------------------------------------- */
.sy-field { display:flex; flex-direction:column; gap:4px; }
.sy-field label { font-size:12px; font-weight:600; color:var(--syt-faded-font-color); }
.sy-input { height:32px; display:flex; align-items:center; padding:0 10px; font-size:12px;
  background:var(--syt-bg-color); border:1px solid var(--syt-border-color); border-radius:8px; }

/* ---- telefono (formulario de campo) -----------------------------------
   Marco de teléfono moderno: bisel fino, esquinas de 44, isla superior y
   botones laterales. La isla NO es una barra de estado falsa — en un
   teléfono real la pinta el sistema; es sólo el recorte del hardware, y
   la pantalla reserva su alto arriba para que no tape nada. */
.sy-phone{
  /* 340x720 es 2.1:1, la proporcion de un telefono de hoy. A 600 de alto
     quedaba mas cuadrado que cualquier telefono real y ademas no entraba
     el contenido de una pantalla de campo. */
  position:relative;width:340px;height:720px;border-radius:46px;flex:none;
  background:linear-gradient(160deg,#3a3a40 0%,#1b1b1d 22%,#1b1b1d 78%,#3a3a40 100%);
  padding:11px;
  box-shadow:0 40px 70px -24px rgba(0,0,0,.5), 0 6px 16px -8px rgba(0,0,0,.35);
}
/* los botones: volumen a la izquierda, encendido a la derecha */
.sy-phone::before{
  content:"";position:absolute;left:-2px;top:112px;width:3px;height:108px;border-radius:2px;
  background:linear-gradient(#2c2c31 0 34%,transparent 34% 42%,#2c2c31 42% 100%);
}
.sy-phone::after{
  content:"";position:absolute;right:-2px;top:150px;width:3px;height:76px;border-radius:2px;
  background:#2c2c31;
}
.sy-phone-screen{
  position:relative;height:100%;border-radius:36px;overflow:hidden;padding-top:26px;
  background:var(--syt-canvas-bg-color);display:flex;flex-direction:column;
}
/* la isla */
.sy-phone-screen::before{
  content:"";position:absolute;z-index:3;top:8px;left:50%;translate:-50% 0;
  width:96px;height:26px;border-radius:14px;background:#0b0b0c;
}
.sy-phone-bar{height:44px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;
  background:var(--syt-bg-color);border-bottom:1px solid var(--syt-border-color);
  font-size:14px;font-weight:600;}
.sy-phone-body{flex:1;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:12px}
.sy-phone-nav{height:60px;flex:none;display:flex;background:var(--syt-bg-color);
  border-top:1px solid var(--syt-border-color);padding-bottom:6px;}
.sy-phone-nav > div{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;font-size:10px;color:var(--syt-faded-font-color);}
.sy-phone-nav > div[aria-current]{color:var(--syt-accent-500);font-weight:700}
/* la barra de gesto */
.sy-phone-screen::after{
  content:"";position:absolute;z-index:3;bottom:7px;left:50%;translate:-50% 0;
  width:112px;height:4px;border-radius:2px;background:rgba(0,0,0,.28);
}


/* ---- el formulario, como hoja larga -----------------------------------
   Un formulario del producto no entra en una caja: se lee bajando. Así
   que la caja es una ventanita de alto fijo y la hoja la recorre sola,
   con el mismo recurso que usa el home en su sección de formularios
   (`sytFormsScroll`): baja, se queda abajo un rato, y vuelve.

   El alto de la caja lo pone el host con --doc-h, y cuánto baja la hoja
   con --doc-y. Si se agrega una sección al formulario hay que volver a
   medir --doc-y: de más, la hoja se despega por abajo. */
.sy-doc{position:relative;overflow:hidden;height:var(--doc-h,460px);background:var(--syt-canvas-bg-color)}
.sy-doc-in{padding:12px;display:flex;flex-direction:column;gap:10px;will-change:transform}
.sy-live .sy-doc-in{animation:sya-doc 24s ease-in-out infinite}
@keyframes sya-doc{
  0%,12%  {transform:translateY(0)}
  48%,60% {transform:translateY(var(--doc-y,-360px))}
  92%,100%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.sy-live .sy-doc-in{animation:none}}
/* el borde de abajo se desvanece: deja claro que la hoja sigue */
.sy-doc::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(245,245,245,0),var(--syt-canvas-bg-color));
}

/* la hoja: el encabezado del formulario y sus bloques de respuestas */
.fm{background:var(--syt-bg-color);border:1px solid var(--syt-border-color);border-radius:10px;
  padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.fm-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fm-code{font-size:11px;color:var(--syt-button-font-color);background:var(--syt-neutral-100);
  border-radius:6px;padding:2px 8px;font-weight:600}
.fm-top .sy-pill{margin-left:auto}
.fm-t{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.fm-s{font-size:12px;color:var(--syt-faded-font-color)}
.fm-sec{background:var(--syt-bg-color);border:1px solid var(--syt-border-color);border-radius:10px;overflow:hidden}
.fm-h{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--syt-faded-font-color);
  border-bottom:1px solid var(--syt-border-color)}
.fm-h .sy-i{height:14px;color:var(--syt-primary-500)}
.fm-q{display:flex;align-items:baseline;gap:12px;padding:8px 12px;border-bottom:1px solid var(--syt-neutral-50)}
.fm-q:last-child{border-bottom:0}
.fm-ql{flex:1;min-width:0;font-size:12px;color:var(--syt-neutral-400)}
.fm-qa{flex:none;font-size:12.5px;font-weight:700;text-align:right}
.fm-qa.is-bad{color:var(--syt-alert-on-tint)}
.fm-pad{padding:10px 12px}

/* ---- chip de veredicto de IA ------------------------------------------ */
.sy-verdict { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px;
  font-size:12px; background:var(--syt-accent-50); }
.sy-verdict .sy-badge { width:20px; height:20px; flex:none; border-radius:6px; display:grid;
  place-items:center; color:#fff; }
.sy-verdict[data-ok] .sy-badge  { background:#4caf50; }
.sy-verdict[data-bad] .sy-badge { background:#f6685e; }
.sy-verdict[data-bad] { background:#fdeceb; }

/* ---- iconos ------------------------------------------------------------ */
.sy-i { height:1em; width:auto; vertical-align:-.125em; fill:currentColor; flex:none; }
.sy-i-16 { height:16px; } .sy-i-20 { height:20px; } .sy-i-24 { height:24px; }
/* Font Awesome Light 300 por debajo de 14 es un trazo de pelo y el
   glifo ocupa el 75% de su caja: el dibujo real queda en 9px y se lee
   incompleto. 14 es el piso para un icono con forma; 12 se reserva
   para el bullet de la columna, que en el producto ES de 12. */
.sy-i-14 { height:14px; }

/* ══════════════════════════════════════════════════════════════════════
   COMPOSICIÓN — sólo para los mockups de las landings
   ----------------------------------------------------------------------
   El kit trae las piezas (board, card, table, pill, phone, verdict); esto
   es el marco que las envuelve: una "ventana" del producto con su barra de
   título. Las medidas siguen las del SPEC: barra de 44, texto de 12, gap
   de 8, radios 8/12.
   ══════════════════════════════════════════════════════════════════════ */

.sy-win{
  background:var(--syt-bg-color);border:1px solid var(--syt-border-color);
  border-radius:12px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(54,54,54,.34), 0 8px 24px -16px rgba(54,54,54,.2);
}
.sy-winbar{
  height:44px;display:flex;align-items:center;gap:12px;padding:0 16px;
  border-bottom:1px solid var(--syt-border-color);
}
/* El color del icono de la ventana NO es decorativo: en el producto cada
   entidad tiene el suyo y sale de las variables del front (front-colors.css,
   --syt-color-<entidad>). Una operacion de material es lila, un formulario es
   celeste, un sitio es azul y una tarea es verde agua — no el cian de marca,
   que es otra cosa. Se aplica con data-ent en la ventana; sin data-ent queda
   el cian, para no romper nada que todavia no este etiquetado. */
.sy-winbar .sy-i{color:var(--syt-primary-500)}
.sy-win[data-ent] .sy-winbar .sy-i{color:var(--ent)}
.sy-win[data-ent="task"],
.sy-win[data-ent="project"],
.sy-win[data-ent="report"]   { --ent:#47c9bd }
.sy-win[data-ent="form"]     { --ent:#3bb7f2 }
.sy-win[data-ent="material"] { --ent:#9597e2 }
.sy-win[data-ent="site"]     { --ent:#607ee0 }
.sy-win[data-ent="network"]  { --ent:#fbac80 }
.sy-win[data-ent="staff"],
.sy-win[data-ent="checkin"]  { --ent:#cc92f0 }
.sy-win[data-ent="agent"]    { --ent:#8b7ff0 }
.sy-wt{font-size:16px;font-weight:300;line-height:1}
.sy-wsub{font-size:12px;color:var(--syt-faded-font-color);line-height:1}
@media (max-width:560px){.sy-wsub{display:none}}

/* el tablero, dentro de la ventana */
.sy-win .sy-board{border-radius:0;padding:12px;background:var(--syt-canvas-bg-color)}

/* la tabla */
.sy-tblwrap{overflow-x:auto}
.sy-win .sy-table{width:100%;min-width:34rem}

/* el formulario */
.sy-form{padding:16px;display:flex;flex-direction:column;gap:16px}
.sy-grid2{display:grid;gap:12px}
@media (min-width:560px){.sy-grid2{grid-template-columns:1fr 1fr}}
.sy-empty{color:var(--syt-faded-font-color);border-style:dashed}

/* las fotos del formulario: el hueco, no una foto inventada */
.sy-shots{display:flex;gap:8px;flex-wrap:wrap}
.sy-shot{margin:0;flex:1 1 7rem;max-width:11rem}
.sy-shot>span{
  display:grid;place-items:center;aspect-ratio:4/3;border-radius:8px;
  background:var(--syt-neutral-50);border:1px solid var(--syt-border-color);
  color:var(--syt-neutral-300);
}
.sy-shot.bad>span{border-color:#f6685e;background:#fdeceb;color:#f6685e}
/* El hueco acepta una foto: si adentro hay un <img>, el recuadro gris
   desaparece y la foto ocupa la caja entera, con el mismo radio y la
   misma proporción. Así poner una foto de verdad es dejar el archivo y
   agregar la etiqueta, sin tocar nada más.

   Mientras no haya archivo, va el hueco y NO una foto de stock: adentro
   de un reporte una foto no decora, dice "esto subió el técnico". */
.sy-shot>span>img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.sy-shot>span:has(img){padding:0;border-color:transparent;background:none}
.sy-shot figcaption{margin-top:6px;font-size:10px;color:var(--syt-faded-font-color)}
/* El sello de arriba a la izquierda dice de donde viene esa respuesta: el pin,
   que la foto trae su ubicacion; la camara de video, que la respuesta no es una
   foto sino un video. Va sobre la foto, no al lado, porque pertenece a ella.
   Solo aparece si el hueco tiene foto: sobre el recuadro vacio no significa nada. */
.sy-shot>span{position:relative}
.sy-shot-b{
  position:absolute;top:5px;left:5px;width:19px;height:19px;border-radius:6px;
  display:grid;place-items:center;background:#fff;color:var(--syt-font-color);
  box-shadow:0 1px 3px rgba(20,30,45,.3);
}
.sy-shot-b>svg{width:10px;height:10px;display:block}
.sy-shot>span:not(:has(img))>.sy-shot-b{display:none}

/* ── el check-in y la hoja de estados (el telefono) ───────────────────
   Dos piezas de la app de campo que el kit no tenia y que en el producto
   son la mitad del trabajo del tecnico: marcar que llego, y mover el
   estado de la tarea. Los estados NO son una lista fija: cada operacion
   configura los suyos, y por eso "En casa del cliente" existe en unas
   organizaciones y en otras no. El color sale del mismo mapa que
   .sy-pill[data-status], asi que una landing no puede inventarse uno. */
.sy-ci{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;
  background:var(--syt-bg-color);border:1px solid var(--syt-border-color);
}
.sy-ci-i{
  flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:#e8f5e9;color:#4caf50;
}
.sy-ci-i>svg{width:14px;height:14px}
.sy-ci-t{display:flex;flex-direction:column;min-width:0;flex:1}
.sy-ci-t>b{font-size:12.5px;font-weight:700;color:var(--syt-font-color);line-height:1.25}
.sy-ci-t>small{font-size:11px;color:var(--syt-faded-font-color);line-height:1.3}

/* la hoja sube desde abajo y tapa la pantalla, como en la app */
.sy-sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  background:var(--syt-canvas-bg-color);
  border-radius:20px 20px 36px 36px;padding:14px 14px 22px;
  box-shadow:0 -14px 34px -14px rgba(11,18,32,.28);
}
/* el tirador */
.sy-sheet::before{
  content:"";position:absolute;top:7px;left:50%;translate:-50% 0;
  width:36px;height:4px;border-radius:2px;background:var(--syt-neutral-200,#e0e0e0);
}
/* En el producto la hoja sube y tapa la pantalla. En una captura estatica eso
   esconde lo de abajo y obliga a confiar en la animacion para mostrarlo, asi
   que la variante `is-inline` la deja en el flujo: mismo contenido, sin tapar
   nada, y se ve tambien sin JavaScript y con prefers-reduced-motion. */
.sy-sheet.is-inline{
  position:static;padding:0;background:none;box-shadow:none;border-radius:0;
}
.sy-sheet.is-inline::before{display:none}
.sy-sheet-x{
  position:absolute;top:10px;right:12px;width:22px;height:22px;border:0;padding:0;
  border-radius:50%;background:var(--syt-neutral-50,#f5f5f5);color:var(--syt-faded-font-color);
  display:grid;place-items:center;cursor:default;
}
.sy-sheet-x>svg{width:9px;height:9px}
.sy-sheet-now{
  display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:9px 10px;border-radius:10px;
  background:var(--syt-accent-50);
}
.sy-sheet.is-inline .sy-sheet-now{margin-top:0}
/* dentro del telefono las tres fotos entran en una fila: 7rem de base las
   partia en 2+1 a 318 px de ancho */
.sy-phone .sy-shot{flex:1 1 0;min-width:0;max-width:none}
.sy-phone .sy-shot figcaption{font-size:9px}
.sy-sheet-l{
  margin:15px 0 7px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--syt-faded-font-color);
}
.sy-sheet-o{
  display:flex;align-items:center;gap:9px;padding:10px;border-radius:10px;margin-bottom:7px;
  background:var(--syt-bg-color);border:1px solid var(--syt-border-color);
}
.sy-sheet-now>i,.sy-sheet-o>i{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb, var(--status-color) 16%, #fff);color:var(--status-color);
}
.sy-sheet-now>i>svg,.sy-sheet-o>i>svg{width:12px;height:12px}
.sy-sheet-now>i,.sy-sheet-o>i{--status-color:#909298}
.sy-sheet [data-status=progress] { --status-color:#2196f3 }
.sy-sheet [data-status=submitted]{ --status-color:#ffa825 }
.sy-sheet [data-status=rejected] { --status-color:#f44336 }
.sy-sheet-t{display:flex;flex-direction:column;min-width:0;flex:1}
.sy-sheet-t>b{font-size:12.5px;font-weight:700;color:var(--syt-font-color);line-height:1.25}
.sy-sheet-t>small{font-size:11px;color:var(--syt-faded-font-color);line-height:1.3}
.sy-sheet-o>em{flex:none;font-style:normal;color:var(--syt-neutral-300,#c7c7c7);font-size:15px;line-height:1}

/* la ficha del sitio */
.sy-rows .sy-row{padding:12px 16px}
/* el título y el subtítulo de la fila son spans: sin esto salen en la misma línea */
.sy-rows .sy-row-txt{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.sy-rowi{display:grid;place-items:center;width:28px;flex:none;color:var(--syt-neutral-300);font-size:14px}
.sy-right{margin-left:auto;font-size:12px;font-weight:600;white-space:nowrap}
.sy-right.is-warn{color:var(--syt-color-orange)}

/* el teléfono */
.sy-phone-bar .sy-i{color:var(--syt-primary-500)}
.sy-off{
  margin-left:auto;font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;
  background:var(--syt-neutral-100);color:var(--syt-neutral-400);
}
.sy-pcard{
  display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:8px;
  background:var(--syt-bg-color);border:1px solid var(--syt-border-color);
}
.sy-pcode{font-size:11px;color:var(--syt-faded-font-color)}
.sy-pname{font-size:14px;font-weight:600}
.sy-phone .sy-input{background:var(--syt-bg-color)}
.sy-sync{
  margin-top:auto;font-size:11px;padding:8px 10px;border-radius:8px;
  background:var(--syt-accent-50);color:var(--syt-accent-500);
}

/* ── pantallas completas: KPIs, barras, filas, barra de filtros ─────── */
.sy-pad{padding:16px;display:flex;flex-direction:column;gap:16px}
.sy-kpis{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media (min-width:620px){.sy-kpis{grid-template-columns:repeat(4,1fr)}}
.sy-kpi-value{font-size:22px}

.sy-bars{display:flex;flex-direction:column;gap:14px}
.sy-prog{display:flex;flex-direction:column;gap:6px}
.sy-prog-top{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:600}
.sy-prog-n{margin-left:auto;color:var(--syt-faded-font-color);font-weight:700}
.sy-prog-track{height:8px;border-radius:4px;background:var(--syt-neutral-100);overflow:hidden}
.sy-prog-track>span{display:block;height:100%;border-radius:4px;background:var(--syt-accent-500)}
.sy-prog-s{font-size:11px;color:var(--syt-faded-font-color)}

.sy-rcode{
  flex:none;font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--syt-faded-font-color);min-width:6.5rem;
}
@media (max-width:560px){.sy-rcode{display:none}}
.sy-rows .sy-row{gap:12px}
.sy-fbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--syt-border-color)}
.sy-fbar .sy-filters{flex:1;min-width:0}
@media (max-width:560px){.sy-fbar .sy-fchip:nth-child(2){display:none}}

/* ── el proceso con un agente adentro ───────────────────────────────── */
.agp{display:flex;flex-direction:column;gap:22px}

/* el grafo: cuatro columnas y la rama en la tercera */
.wf{display:grid;gap:12px 36px;grid-template-columns:repeat(4,minmax(0,1fr))}
.wf-col{position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px}
/* el conector: una línea y su punta, centrados sobre la columna anterior */
.wf-col:not(:first-child)::before{
  content:"";position:absolute;left:-32px;top:50%;width:28px;height:1.5px;
  background:var(--syt-accent-200);
}
.wf-col:not(:first-child)::after{
  content:"";position:absolute;left:-10px;top:50%;translate:0 -50%;
  border:5px solid transparent;border-left-color:var(--syt-accent-200);
}
@media (max-width:860px){
  .wf{grid-template-columns:1fr}
  .wf-col:not(:first-child)::before,.wf-col:not(:first-child)::after{display:none}
}

.wf-node{
  position:relative;background:var(--syt-bg-color);border:1px solid var(--syt-border-color);
  border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px;
}
.wf-node.is-on{border-color:var(--syt-primary-500);box-shadow:0 0 0 3px rgba(0,188,212,.14)}
/* El estado va DENTRO de la tarjeta. Antes quedaba a caballo del borde
   superior (position:absolute;top:-9px) y se leía como texto saliéndose del
   bloque, sobre todo en español y portugués, donde la palabra es más larga. */
.wf-badge{
  align-self:flex-start;padding:2px 7px;border-radius:5px;
  background:#e7f6e8;color:#2e7d32;font-size:9px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
.wf-top{display:flex;align-items:flex-start;gap:8px}
.wf-name{flex:1;min-width:0;font-size:13px;font-weight:700;line-height:1.3}
.wf-av{
  flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--syt-neutral-100);color:var(--syt-neutral-400);font-size:9px;font-weight:800;
}
.wf-av.is-ag{background:var(--syt-primary-500);color:#fff}
.wf-av.is-ag .sy-i{height:12px}
.wf-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wf-d{
  padding:3px 7px;border-radius:6px;background:var(--syt-neutral-50);
  color:var(--syt-neutral-400);font-size:10px;font-weight:600;
}
.wf-ag{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;
  background:#e3f7fa;color:#0a7d8a;font-size:10px;font-weight:700;
}
.wf-ag .sy-i{height:11px}

/* la tarea y la ficha, lado a lado */
.agp-row{display:grid;gap:16px}
@media (min-width:900px){.agp-row{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}}

.td-bc{font-size:11px;color:var(--syt-faded-font-color)}
.td-sep{color:var(--syt-neutral-200)}
.td-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.td-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.td-chips .sy-pill{margin-left:auto}
.td-t{margin:2px 0 0;font-size:20px;font-weight:700;line-height:1.2;color:var(--syt-font-color)}
.td-tabs{display:flex;gap:16px;font-size:12px;color:var(--syt-faded-font-color);flex-wrap:wrap}
.td-tabs .is-on{color:var(--syt-font-color);font-weight:700;border-bottom:2px solid var(--syt-accent-500);padding-bottom:4px}
.td-ref{
  display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;
  border:1px solid var(--syt-border-color);
}
.td-rc{font-size:10px;color:var(--syt-faded-font-color)}
.td-rn{font-size:13px;font-weight:600}
.td-p{margin:0;font-size:12px;line-height:1.55;color:var(--syt-neutral-400)}
.td-lbl{margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--syt-faded-font-color)}

.agc-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--syt-border-color)}
.agc-av{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--syt-primary-500);color:#fff;
}
.agc-id{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.agc-name{font-size:15px;font-weight:700;line-height:1}
.agc-id .sy-i{height:11px}
.agc-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.agc-desc{margin:0;font-size:12px;line-height:1.55;color:var(--syt-neutral-400)}
.agc-sks{display:flex;gap:6px;flex-wrap:wrap}
.agc-meta{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px}
.agc-meta dt{color:var(--syt-faded-font-color)}
.agc-meta dd{margin:0;font-weight:600;display:flex;align-items:center;gap:6px}
.agc-meta dd.is-ok{color:#2e7d32}
.agc-dot{width:7px;height:7px;border-radius:50%;background:#4caf50}
.agc-btns{display:flex;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--syt-border-color)}

/* ══════════════════════════════════════════════════════════════════════
   LA FUNCIONALIDAD ESTRELLA DE CADA LANDING
   Una distinta por caso de uso: el reporte con IA, la validación en el
   teléfono, la medición por cantidades, la ficha del sitio y el rastreo
   de campo. Todo recreado — nunca una captura — para que el texto viva
   en el diccionario y se traduzca con el resto de la página.
   ══════════════════════════════════════════════════════════════════════ */

.mapv{display:block;width:100%;height:100%;border-radius:8px}

/* ── el editor de reportes ──────────────────────────────────────────── */
.rp .rp-acts{margin-left:auto;display:flex;gap:6px}
.rp-grid{display:grid;background:var(--syt-canvas-bg-color)}
/* el editor muestra el tablero y nada más: una sola columna */
.rp-chat{padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--syt-bg-color);
  border-right:1px solid var(--syt-border-color)}
@media (max-width:819px){.rp-chat{border-right:0;border-bottom:1px solid var(--syt-border-color)}}
.rp-msg p{margin:4px 0 0;font-size:11.5px;line-height:1.5;color:var(--syt-neutral-400)}
.rp-who{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700}
.rp-who .sy-i{height:12px;color:var(--syt-accent-500)}
.rp-msg.is-me{align-self:flex-end;max-width:88%;padding:8px 10px;border-radius:10px 10px 2px 10px;
  border:1px solid var(--syt-border-color)}
.rp-msg.is-me p{margin:0;color:var(--syt-font-color)}
.rp-input{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  border:1px solid var(--syt-border-color);font-size:11.5px;color:var(--syt-faded-font-color)}
.rp-send{margin-left:auto;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:var(--syt-accent-500);color:#fff}
.rp-send .sy-i{height:11px}
/* el tablero de widgets chicos lo reemplazó el dashboard (.dash) */
.rp-grid>.dash{min-width:0}
.rp-w{background:var(--syt-bg-color);border:1px solid var(--syt-border-color);border-radius:8px;
  padding:10px;display:flex;flex-direction:column;gap:8px;min-height:104px}
.rp-wt{font-size:10.5px;font-weight:700;line-height:1.3}
.rp-big{font-size:30px;font-weight:700;line-height:1;color:var(--syt-accent-500)}
.rp-donut{width:62px;height:62px;margin-inline:auto}
.rp-bars{display:flex;align-items:flex-end;gap:6px;height:56px}
.rp-bars>span{flex:1;border-radius:3px 3px 0 0;background:var(--syt-accent-500);opacity:.78}
.rp-line{width:100%;height:46px}

/* ── la validación en el teléfono ───────────────────────────────────── */
.pa-pct{margin-left:auto;font-size:11px;font-weight:700;color:var(--syt-accent-500)}
.pa-code{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--syt-faded-font-color);font-weight:700}
.sy-verdict[data-ok]{background:#eaf6ea}
.sy-verdict b{display:block;margin-bottom:2px}
.pa-q{display:flex;align-items:center;gap:6px}
.pa-qt{font-size:12px;font-weight:700}

/* ── la medición por cantidades ─────────────────────────────────────── */
.sy-table.me th,.sy-table.me td{padding:8px 10px}
.me-c{white-space:nowrap;color:var(--syt-faded-font-color);font-weight:700;font-size:11px}
.me-b{min-width:8rem}
.me-track{display:inline-block;width:5.4rem;height:6px;border-radius:3px;background:var(--syt-neutral-100);
  overflow:hidden;vertical-align:middle;margin-right:6px}
.me-track>span{display:block;height:100%;border-radius:3px;background:var(--syt-accent-500)}
.me-p{font-size:11px;font-weight:700;color:var(--syt-neutral-400)}
.me-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;
  border-top:1px solid var(--syt-border-color);font-size:12px;color:var(--syt-faded-font-color)}
.me-foot b{color:var(--syt-font-color);font-size:14px}
.me-foot b.is-warn{color:var(--syt-color-orange)}
.me-sep{color:var(--syt-neutral-200)}

/* ── la ficha del sitio ─────────────────────────────────────────────── */
.st-grid{display:grid;gap:16px;padding:16px}
@media (min-width:860px){.st-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.st-l{display:flex;flex-direction:column;gap:14px}
.st-2{display:grid;gap:14px}
@media (min-width:560px){.st-2{grid-template-columns:1fr 1fr}}
.st-b{display:flex;flex-direction:column;gap:6px}
.st-c{display:flex;gap:8px;padding:8px 10px;border:1px solid var(--syt-border-color);border-radius:8px}
.st-ci{flex:none;width:18px;display:grid;place-items:start center;color:var(--syt-neutral-300);padding-top:2px}
.st-ct{min-width:0;display:flex;flex-direction:column;gap:3px}
.st-cc{font-size:10px;color:var(--syt-faded-font-color);font-weight:700}
.st-cn{font-size:12px;font-weight:700;line-height:1.3}
.st-cm{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st-cm .sy-pill{min-height:20px;max-height:20px;font-size:10px;padding:2px 8px}
.st-cd{font-size:10px;color:var(--syt-faded-font-color)}
.st-r{display:flex;flex-direction:column;gap:8px}
.st-map{aspect-ratio:220/130;border-radius:8px;overflow:hidden;border:1px solid var(--syt-border-color)}
.st-coord{display:flex;gap:8px}
.st-coord span{padding:4px 8px;border:1px solid var(--syt-border-color);border-radius:6px;
  font-size:11px;color:var(--syt-neutral-400)}
.st-caps{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.st-cap{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--syt-neutral-400)}
.st-cap .sy-i{color:var(--syt-accent-500)}

/* ── el rastreo de campo ────────────────────────────────────────────── */
.tr-body{display:flex;flex-direction:column}
.tr-bar-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;
  border-bottom:1px solid var(--syt-border-color)}
.tr-kpis{display:grid;gap:1px;background:var(--syt-border-color);border-bottom:1px solid var(--syt-border-color);
  grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.tr-kpis{grid-template-columns:repeat(4,1fr)}}
@media (min-width:980px){.tr-kpis{grid-template-columns:repeat(7,1fr)}}
.tr-k{background:var(--syt-bg-color);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.tr-kl{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--syt-faded-font-color)}
.tr-kv{font-size:15px;font-weight:700}
.tr-k.is-ok .tr-kv{color:var(--syt-primary-500)}
.tr-k.is-warn .tr-kv{color:var(--syt-color-orange)}
.tr-leg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;
  font-size:10px;color:var(--syt-faded-font-color);border-bottom:1px solid var(--syt-border-color)}
.tr-lk{width:16px;height:6px;border-radius:3px;background:var(--syt-neutral-100)}
.tr-lk.is-wrk{background:var(--syt-accent-500)}
.tr-lk.is-idl{background:var(--syt-color-orange)}
.tr-grid{display:grid;gap:0}
@media (min-width:860px){.tr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.tr-left{padding:14px 16px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--syt-border-color)}
@media (max-width:859px){.tr-left{border-right:0;border-bottom:1px solid var(--syt-border-color)}}
.tr-d{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:11px}
.tr-d.is-on{font-weight:700}
.tr-dl{flex:none;width:3.6rem;color:var(--syt-faded-font-color)}
.tr-d.is-on .tr-dl{color:var(--syt-accent-500)}
.tr-bar{flex:1;min-width:0;position:relative;height:8px;border-radius:4px;background:var(--syt-neutral-100)}
.tr-w{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--syt-accent-500)}
.tr-dr{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.35;min-width:5.6rem}
.tr-h{font-weight:700}
.tr-r,.tr-none{font-size:10px;color:var(--syt-faded-font-color);font-weight:400}
.tr-right{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.tr-day{font-size:14px;font-weight:700}
.tr-map{position:relative;margin-top:4px;aspect-ratio:220/100;border-radius:8px;overflow:hidden;
  border:1px solid var(--syt-border-color)}
.tr-count{position:absolute;left:50%;bottom:8px;translate:-50% 0;padding:4px 10px;border-radius:999px;
  background:var(--syt-bg-color);border:1px solid var(--syt-border-color);font-size:10px;
  color:var(--syt-neutral-400);box-shadow:var(--syt-box-shadow-low)}

/* ══════════════════════════════════════════════════════════════════════
   EL MOVIMIENTO DE LAS PANTALLAS
   ----------------------------------------------------------------------
   El vocabulario es el del home (`syt-cursor`, `syt-cardmove`,
   `syt-panel`, `syt-ring`, `syt-check`…): un bucle de 10 s dentro del
   mockup donde algo PASA — el puntero va a un lugar, una tarjeta cambia
   de columna, un panel abre, una validación cierra con su tilde. No es
   una entrada al hacer scroll: eso ya lo hace /assets/landing.js.

   Tres reglas:

   1 · **Nada se mueve si la pantalla no está en escena.** El bucle sólo
       corre bajo `.sy-live`, que el runtime de la página pone y saca. Un
       mockup fuera de pantalla —o el que no es el momento activo de la
       cadena— queda quieto en su estado final, que es el legible.
   2 · **El estado final es el que vale.** Sin JS, sin `.sy-live` y con
       `prefers-reduced-motion`, cada pieza se ve como si el bucle hubiera
       terminado. Ninguna queda invisible.
   3 · **Un solo reloj.** Todo dura 10 s y arranca junto, así el puntero
       llega al botón cuando el panel abre. Los porcentajes de cada
       keyframe son el guion.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- el guion, en porcentajes de un bucle de 10 s --------------------- */

/* el puntero: se dibuja como el cursor del sistema, no como un círculo */
@keyframes sya-cursor{
  0%   {opacity:0}
  6%   {opacity:1}
  84%  {opacity:1}
  92%,100%{opacity:0}
}
/* una tarjeta que se arrastra de una columna a la otra: se levanta,
   viaja, aterriza. Las posiciones las pone el host con --x/--y. */
@keyframes sya-cardmove{
  0%,14%  {transform:translate(0,0) scale(1);box-shadow:var(--syt-box-shadow-low)}
  20%     {transform:translate(0,-4px) scale(1.04);box-shadow:0 22px 42px -10px rgba(20,30,45,.34)}
  40%     {transform:translate(var(--x,0),var(--y,0)) scale(1.04);box-shadow:0 22px 42px -10px rgba(20,30,45,.34)}
  48%,100%{transform:translate(var(--x,0),var(--y,0)) scale(1);box-shadow:var(--syt-box-shadow-low)}
}
/* el hueco que deja la tarjeta al irse */
@keyframes sya-gap{0%,18%{opacity:1}24%,100%{opacity:0}}
/* un panel modal que abre y se queda */
@keyframes sya-backdrop{0%,10%{opacity:0}16%{opacity:1}100%{opacity:1}}
@keyframes sya-panel{
  0%,10%{opacity:0;transform:translateY(8px) scale(.97)}
  18%,100%{opacity:1;transform:none}
}
/* una barra que llega a su valor */
@keyframes sya-fill{0%{width:0}46%,100%{width:var(--w,100%)}}
/* una barra de gráfico que sube */
@keyframes sya-bar{0%,6%{height:6%}44%,100%{height:var(--h,60%)}}
/* un trazo que se dibuja: el anillo del donut, la línea del gráfico */
@keyframes sya-draw{0%,8%{stroke-dashoffset:var(--len,320)}46%,100%{stroke-dashoffset:var(--end,0)}}
/* la validación: el anillo cierra y sale el tilde */
@keyframes sya-ring{0%,12%{stroke-dashoffset:138}36%,100%{stroke-dashoffset:0}}
@keyframes sya-check{0%,34%{opacity:0;transform:scale(.6)}42%,100%{opacity:1;transform:scale(1)}}
/* el estado de una etapa: gris, activo, cerrado */
@keyframes sya-step{
  0%,8%   {background:var(--syt-neutral-100);color:var(--syt-neutral-300);box-shadow:none}
  16%     {background:var(--syt-accent-500);color:#fff;box-shadow:0 0 0 4px rgba(96,111,247,.18)}
  34%,100%{background:#e7f6e8;color:#2e7d32;box-shadow:none}
}
/* el conector que corre entre dos nodos */
@keyframes sya-dash{to{stroke-dashoffset:-22}}
/* el latido del agente mientras trabaja */
@keyframes sya-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,188,212,.34)}50%{box-shadow:0 0 0 7px rgba(0,188,212,0)}}
/* el texto que el agente escribe */
@keyframes sya-type{0%,8%{max-width:0}34%,100%{max-width:100%}}
@keyframes sya-caret{0%,30%{opacity:1}38%,100%{opacity:0}}
/* una foto que entra al formulario */
@keyframes sya-shot{0%,22%{opacity:0;transform:scale(.94)}32%,100%{opacity:1;transform:none}}
/* el foco del producto: el recuadro que marca dónde mirar */
@keyframes sya-focus{
  0%,2%{box-shadow:0 0 0 0 rgba(96,111,247,0);border-color:var(--syt-border-color)}
  10%,72%{box-shadow:0 0 0 3px rgba(96,111,247,.16);border-color:var(--syt-accent-500)}
  84%,100%{box-shadow:0 0 0 0 rgba(96,111,247,0);border-color:var(--syt-border-color)}
}

/* ---- la escalera de tiempos ------------------------------------------
   El guion de una pantalla es una lista de cosas que aparecen, una detrás
   de la otra: el nodo, después su agente, después la tarjeta que el agente
   dejó. En vez de inventar un keyframe por caso, hay DIEZ paradas fijas
   —4 · 10 · 16 · 22 · 28 · 36 · 44 · 52 · 60 · 68%— y cada pieza dice en cuál entra (`data-sya="in4"`) o en cuál se
   va (`out4`). Dos piezas en la misma parada cambian a la vez, que es
   como se arma un intercambio: la vieja `outN`, la nueva `inN`.

   `--rise` es cuánto sube al entrar; en un intercambio va en 0, porque
   ahí las dos ocupan el mismo lugar y moverlas se ve como un salto. */
@keyframes sya-in1{0%,4%{opacity:0;transform:translateY(var(--rise,10px))}10%,100%{opacity:1;transform:none}}
@keyframes sya-in2{0%,10%{opacity:0;transform:translateY(var(--rise,10px))}16%,100%{opacity:1;transform:none}}
@keyframes sya-in3{0%,16%{opacity:0;transform:translateY(var(--rise,10px))}22%,100%{opacity:1;transform:none}}
@keyframes sya-in4{0%,22%{opacity:0;transform:translateY(var(--rise,10px))}28%,100%{opacity:1;transform:none}}
@keyframes sya-in5{0%,28%{opacity:0;transform:translateY(var(--rise,10px))}34%,100%{opacity:1;transform:none}}
@keyframes sya-in6{0%,36%{opacity:0;transform:translateY(var(--rise,10px))}42%,100%{opacity:1;transform:none}}
@keyframes sya-in7{0%,44%{opacity:0;transform:translateY(var(--rise,10px))}50%,100%{opacity:1;transform:none}}
@keyframes sya-in8{0%,52%{opacity:0;transform:translateY(var(--rise,10px))}58%,100%{opacity:1;transform:none}}
@keyframes sya-in9{0%,60%{opacity:0;transform:translateY(var(--rise,10px))}66%,100%{opacity:1;transform:none}}
@keyframes sya-in10{0%,68%{opacity:0;transform:translateY(var(--rise,10px))}74%,100%{opacity:1;transform:none}}
@keyframes sya-out1{0%,4%{opacity:1}10%,100%{opacity:0}}
@keyframes sya-out2{0%,10%{opacity:1}16%,100%{opacity:0}}
@keyframes sya-out3{0%,16%{opacity:1}22%,100%{opacity:0}}
@keyframes sya-out4{0%,22%{opacity:1}28%,100%{opacity:0}}
@keyframes sya-out5{0%,28%{opacity:1}34%,100%{opacity:0}}
@keyframes sya-out6{0%,36%{opacity:1}42%,100%{opacity:0}}
@keyframes sya-out7{0%,44%{opacity:1}50%,100%{opacity:0}}
@keyframes sya-out8{0%,52%{opacity:1}58%,100%{opacity:0}}
@keyframes sya-out9{0%,60%{opacity:1}66%,100%{opacity:0}}
@keyframes sya-out10{0%,68%{opacity:1}74%,100%{opacity:0}}

/* quietas: la que entra ya entró, la que se va ya se fue. Los
   interruptores de la escalera NO van acá: van después del atajo
   `.sy [data-sya]{animation:...}` de abajo, que al no llevar nombre
   resetea animation-name. Puestos antes, la escalera no corre. */
.sy [data-sya^="out"]{opacity:0}
/* ---- el interruptor --------------------------------------------------
   Sin `.sy-live` no hay animación: cada pieza queda en su estado final.
   Con él, todas arrancan juntas y repiten. `animation-name` es lo único
   que cambia, así el estado quieto y el animado no se escriben dos veces. */
.sy [data-sya]{animation:10s linear infinite both paused}
.sy-live [data-sya]{animation-play-state:running}
.sy-live [data-sya="in1"]{animation-name:sya-in1}
.sy-live [data-sya="in2"]{animation-name:sya-in2}
.sy-live [data-sya="in3"]{animation-name:sya-in3}
.sy-live [data-sya="in4"]{animation-name:sya-in4}
.sy-live [data-sya="in5"]{animation-name:sya-in5}
.sy-live [data-sya="in6"]{animation-name:sya-in6}
.sy-live [data-sya="in7"]{animation-name:sya-in7}
.sy-live [data-sya="in8"]{animation-name:sya-in8}
.sy-live [data-sya="in9"]{animation-name:sya-in9}
.sy-live [data-sya="in10"]{animation-name:sya-in10}
.sy-live [data-sya="out1"]{animation-name:sya-out1;--rise:0}
.sy-live [data-sya="out2"]{animation-name:sya-out2;--rise:0}
.sy-live [data-sya="out3"]{animation-name:sya-out3;--rise:0}
.sy-live [data-sya="out4"]{animation-name:sya-out4;--rise:0}
.sy-live [data-sya="out5"]{animation-name:sya-out5;--rise:0}
.sy-live [data-sya="out6"]{animation-name:sya-out6;--rise:0}
.sy-live [data-sya="out7"]{animation-name:sya-out7;--rise:0}
.sy-live [data-sya="out8"]{animation-name:sya-out8;--rise:0}
.sy-live [data-sya="out9"]{animation-name:sya-out9;--rise:0}
.sy-live [data-sya="out10"]{animation-name:sya-out10;--rise:0}
.sy-live [data-sya="cursor"]    {animation-name:sya-cursor}
.sy-live [data-sya="cardmove"]  {animation-name:sya-cardmove;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.sy-live [data-sya="gap"]       {animation-name:sya-gap}
.sy-live [data-sya="backdrop"]  {animation-name:sya-backdrop}
.sy-live [data-sya="panel"]     {animation-name:sya-panel;animation-timing-function:cubic-bezier(.2,.8,.3,1)}
.sy-live [data-sya="fill"]      {animation-name:sya-fill;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.sy-live [data-sya="bar"]       {animation-name:sya-bar;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.sy-live [data-sya="draw"]      {animation-name:sya-draw;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.sy-live [data-sya="ring"]      {animation-name:sya-ring;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.sy-live [data-sya="check"]     {animation-name:sya-check;animation-timing-function:cubic-bezier(.2,1.4,.4,1)}
.sy-live [data-sya="step"]      {animation-name:sya-step}
.sy-live [data-sya="dash"]      {animation-name:sya-dash;animation-duration:1.1s}
.sy-live [data-sya="pulse"]     {animation-name:sya-pulse;animation-duration:2.4s;animation-timing-function:ease-out}
.sy-live [data-sya="type"]      {animation-name:sya-type;animation-timing-function:steps(34,end)}
.sy-live [data-sya="caret"]     {animation-name:sya-caret;animation-duration:1.05s;animation-timing-function:steps(1,end)}
.sy-live [data-sya="shot"]      {animation-name:sya-shot}
.sy-live [data-sya="focus"]     {animation-name:sya-focus}

/* el estado final, el que se ve quieto */
.sy [data-sya="type"]{max-width:100%;overflow:hidden;white-space:nowrap;display:inline-block;vertical-align:bottom}
.sy [data-sya="caret"]{opacity:0}
.sy [data-sya="gap"]{opacity:0}
.sy [data-sya="cardmove"]{transform:translate(var(--x,0),var(--y,0))}
.sy [data-sya="fill"]{width:var(--w,100%)}
.sy [data-sya="bar"]{height:var(--h,60%)}
.sy [data-sya="draw"]{stroke-dashoffset:var(--end,0)}
.sy [data-sya="ring"]{stroke-dashoffset:0}
.sy [data-sya="step"]{background:#e7f6e8;color:#2e7d32}

@media (prefers-reduced-motion:reduce){
  .sy [data-sya],.sy-live [data-sya]{animation:none !important}
}

/* ---- el puntero ------------------------------------------------------
   Va absoluto sobre el mockup, con su posición en --l/--t, y no recibe
   clicks. La flecha es la del sistema, dibujada, no un emoji. */
.sy-ptr{
  position:absolute;z-index:6;left:var(--l,50%);top:var(--t,50%);
  width:19px;height:19px;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.34));
}

/* ══════════════════════════════════════════════════════════════════════
   EL DASHBOARD
   ----------------------------------------------------------------------
   La estética del dashboard real del producto, que es bastante más que
   una fila de KPIs: cada tarjeta tiene su icono, su etiqueta, la píldora
   de variación contra el período anterior, el número grande con su
   unidad, una sparkline de fondo y el pie que dice contra qué se compara.

   Las tarjetas vienen en tres tonos y se alternan a propósito: el acento
   en las que abren cada fila, la oscura para cerrar, y blancas en el
   medio. Es lo que le da el ritmo al tablero.

   Debajo, los dos paneles que siempre acompañan: la matriz de plantilla
   por estado —donde cada celda es un chip, más oscuro cuanto más peso
   tiene— y el reparto por estado.
   ══════════════════════════════════════════════════════════════════════ */

.dash{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--syt-canvas-bg-color);container-type:inline-size}
.dash-kpis{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:620px){.dash-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}

.dash-k{
  position:relative;overflow:hidden;border-radius:14px;padding:13px 15px 12px;
  min-height:172px;display:flex;flex-direction:column;
  background:var(--syt-bg-color);border:1px solid var(--syt-border-color);
}
/* la de acento y la oscura no llevan borde: el color ya las separa */
.dash-k.is-accent{
  border:0;color:#fff;
  background:linear-gradient(135deg,#7b6ef6 0%,#6a5cf0 48%,#5f6ff7 100%);
}
.dash-k.is-dark{border:0;color:#fff;background:#14161c}

.dash-k-top{position:relative;z-index:2;display:flex;align-items:flex-start;gap:9px}
/* el icono va en un chip redondeado, como en el producto */
.dash-k-i{
  flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:var(--syt-accent-50);color:var(--syt-accent-500);
}
.dash-k-i .sy-i{height:13px}
.dash-k.is-accent .dash-k-i,.dash-k.is-dark .dash-k-i{background:rgba(255,255,255,.16);color:#fff}
/* la etiqueta NO se recorta: envuelve las líneas que haga falta */
.dash-k-l{font-size:12px;font-weight:600;letter-spacing:-.01em;line-height:1.3;min-width:0;padding-top:4px}
.dash-k.is-accent .dash-k-l,.dash-k.is-dark .dash-k-l{color:rgba(255,255,255,.94)}

/* la píldora de variación: verde sube, rosa baja. Sobre la tarjeta
   oscura y la de acento va translúcida, que es como se ve en el producto */
.dash-d{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;line-height:1.4;
}
.dash-d.up{background:#d8f5e3;color:#0f7b42}
.dash-d.down{background:#fde2ea;color:#c2185b}
.dash-k.is-accent .dash-d,.dash-k.is-dark .dash-d{background:rgba(255,255,255,.18);color:#fff}

.dash-k-v{
  position:relative;z-index:2;margin-top:9px;
  font-size:38px;font-weight:700;line-height:1;letter-spacing:-.035em;
}
.dash-k-u{font-size:14px;font-weight:600;margin-left:2px;opacity:.8}

/* el gráfico sangra a los cuatro bordes y ocupa la franja de abajo */
/* su propia banda, sangrando a los lados pero NO hasta abajo: debajo
   va el pie, y no se encima nada */
.dash-spark{display:block;width:calc(100% + 30px);margin:12px -15px 0;height:58px}
.dash-spark .l{fill:none;stroke:var(--syt-accent-500);stroke-width:1.8;opacity:.9}
.dash-spark .a{fill:var(--syt-accent-500);opacity:.12}
.dash-k.is-accent .dash-spark .l,.dash-k.is-dark .dash-spark .l{stroke:#fff;opacity:.85}
.dash-k.is-accent .dash-spark .a,.dash-k.is-dark .dash-spark .a{fill:#fff;opacity:.16}

/* el pie se apoya sobre la parte baja del gráfico, que está vacía */
/* el pie, DEBAJO del gráfico y con su propio aire */
.dash-k-f{margin-top:10px;font-size:9.5px;line-height:1.35;color:var(--syt-faded-font-color)}
.dash-k.is-accent .dash-k-f,.dash-k.is-dark .dash-k-f{color:rgba(255,255,255,.72)}

/* ── los dos paneles de abajo ───────────────────────────────────────── */
.dash-grid{display:grid;gap:10px}
@media (min-width:860px){.dash-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.dash-p{background:var(--syt-bg-color);border:1px solid var(--syt-border-color);
  border-radius:14px;padding:13px 14px 12px}
.dash-p-t{font-size:12px;font-weight:600;margin-bottom:10px}

/* la matriz: cada celda es un chip, y el peso lo da el tono */
.dash-p{min-width:0}
.dash-m{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0 5px;font-size:10.5px}
.dash-m th{font-size:9px;font-weight:600;color:var(--syt-faded-font-color);
  padding:0 5px 3px;text-align:center;white-space:nowrap}
.dash-m th:first-child{text-align:left}
.dash-m td{padding:0 3px;text-align:center}
.dash-m td:first-child,.dash-m th:first-child{width:30%;text-align:right;color:var(--syt-neutral-400);
  padding-right:9px;font-size:10px;line-height:1.25;white-space:normal}
.dash-c{display:block;border-radius:6px;padding:4px 0;font-weight:700;font-variant-numeric:tabular-nums}
.dash-c.hi{background:#282c4a;color:#fff}
.dash-c.mid{background:#dcdcfb;color:#4a52c4}
.dash-c.lo{background:#ececfd;color:#6b70b8}
.dash-c.zero{color:var(--syt-neutral-200);font-weight:600}

/* el reparto por estado */
.dash-pie{display:flex;align-items:center;gap:16px;padding-top:2px}
.dash-pie svg{flex:none;width:148px;height:148px}
.dash-leg{display:flex;flex-direction:column;gap:9px;font-size:11px}
.dash-leg span{display:flex;align-items:center;gap:7px;color:var(--syt-neutral-400)}
.dash-leg i{width:8px;height:8px;border-radius:50%;flex:none}