/* ==========================================================================
   Aizy 2027 — hoja única del Environment Manager (épica KAN-356)

   Contrato:
   - Todas las clases empiezan por a27- y todos los selectores cuelgan de .a27.
     En producto .a27 va en <body>; en el lienzo, en la raíz del artboard.
   - Solo roles y escalas de aizy-tokens.css. Cero hex, cero rgb().
   - Las medidas en px, em o ms solo existen en el bloque de dimensiones de
     .a27 (§0). El resto de la hoja las nombra por variable.
   - Responsive por container queries sobre .a27-app y .a27-auth (§13).
   - Noche: .ka-night reasigna roles en aizy-tokens.css. La hoja solo tiene
     dos reglas de noche: el esquema de color de los controles nativos (§0),
     que el navegador no deduce de los roles, y el cambio de imagen del
     logotipo (§2), porque un PNG de tres tintas no se puede reasignar.
   - Cero estilos en línea en las vistas: si algo no cabe, se añade una
     variante aquí y en el catálogo.

   Índice: 0 Raíz y dimensiones · 1 Base y texto · 2 Shell · 3 Banda de página
   · 4 Barra de filtros · 5 Rejilla · 6 Tarjeta · 7 Formulario · 7b Formulario
   avanzado · 8 Acciones · 9 Estado · 10 Datos · 10b Vista previa · 11 Acceso
   · 12 Ayuda · 12b Capas · 12d Shell de Knowledge Admin · 13 Responsive
   ========================================================================== */

/* 0. Raíz y dimensiones ------------------------------------------------- */
.a27 {
  --a27-hairline: 1px;
  --a27-indicator: 2px;
  --a27-focus-offset: 2px;
  --a27-sidebar-w: 264px;
  --a27-sidebar-rail-w: 65px;
  --a27-logo-h: 40px;
  --a27-logo-h-sm: 28px;
  --a27-logo-h-lg: 64px;
  --a27-topbar-h: 56px;
  --a27-nav-item-h: 36px;
  --a27-tab-h: 44px;
  --a27-control-h: 40px;
  --a27-control-h-sm: 32px;
  --a27-icon-btn: 28px;
  --a27-icon-btn-lg: 36px;
  --a27-tag-h: 24px;
  --a27-icon-lg: 28px;
  --a27-icon: 20px;
  --a27-icon-sm: 18px;
  --a27-icon-xs: 14px;
  --a27-step: 24px;
  --a27-switch-w: 36px;
  --a27-switch-h: 20px;
  --a27-switch-knob: 16px;
  --a27-switch-inset: 2px;
  --a27-progress-h: 8px;
  --a27-legend-dot: 10px;
  --a27-list-row-h: 48px;
  --a27-code-w: 168px;
  --a27-qr: 168px;
  --a27-log-h: 240px;
  --a27-list-h: 480px;
  --a27-chart-h: 220px;
  --a27-content-max: 1280px;
  --a27-viewport-h: 100vh;
  --a27-auth-w: 440px;
  --a27-search-min: 240px;
  --a27-field-min: 200px;
  --a27-kpi-min: 180px;
  --a27-kv-min: 200px;
  --a27-tooltip-gap: 6px;
  --a27-tracking-tight: -0.02em;
  --a27-tracking-caps: 0.06em;
  --a27-tracking-code: 0.3em;
  --a27-motion: 140ms;
  --a27-slide: 200ms;
  --a27-disclosure-turn: 90deg;
  --a27-disabled: 0.5;
  --a27-spin: 900ms;
  --a27-turn: 360deg;
  --a27-scrim: 80%;
  --a27-safe-bottom: env(safe-area-inset-bottom, 0px);
  --a27-workspace-h: 480px;
  --a27-workspace-list-w: 320px;
  --a27-workspace-main-min: 240px;
  --a27-workspace-aside-w: 320px;
  --a27-dialog-w: 480px;
  --a27-dialog-w-sm: 360px;
  --a27-dialog-w-lg: 640px;
  --a27-menu-w: 280px;
  --a27-menu-h: 360px;
  --a27-toast-w: 360px;
  --a27-stage-h: 360px;
  --a27-flip: 180deg;
  --a27-lang-select-w: 88px;
  --a27-color-hex-w: 120px;
  --a27-color-hex-w-sm: 96px;
  --a27-color-picker-w: 48px;
  --a27-dropzone-h: 128px;
  --a27-range-h: 20px;
  --a27-range-value-w: 56px;
  --a27-editor-h: 160px;
  --a27-editor-max-h: 480px;
  --a27-editor-img-max-h: 240px;
  --a27-embed-ratio: 16 / 9;
  --a27-palette-min: 200px;
  --a27-swatch: 24px;
  --a27-preview-h-inline: 360px;
  --a27-preview-h-floating: 560px;
  --a27-z-raised: 5;
  --a27-z-menu: 30;
  --a27-z-busy: 40;
  --a27-z-dialog: 50;
  --a27-z-toast: 60;
  /* KAN-418 */
  --a27-bot-select-w: 220px;
  --a27-actionbar-h: 65px;
  --a27-actionbar-h-narrow: 93px;

  /* KAN-417 */
  --a27-series-1: var(--aizy-chart-1);
  --a27-series-2: var(--aizy-chart-2);
  --a27-series-3: var(--aizy-chart-3);
  --a27-series-4: var(--aizy-chart-4);
  --a27-series-5: var(--aizy-chart-5);
  --a27-series-6: var(--aizy-chart-6);
  --a27-series-7: var(--aizy-chart-7);
  --a27-series-8: var(--aizy-chart-8);
  --a27-sort-idle: 0.5;
  --a27-fade: 1600ms;
  --a27-overlay: 80%;
  --a27-dot: 8px;
  --a27-icon-brand: 20px;
  --a27-icon-brand-sm: 16px;
  --a27-avatar-sm: 24px;
  --a27-avatar-md: 40px;
  --a27-avatar-lg: 64px;
  --a27-timeline-dot: 12px;
  --a27-timeline-gap: 24px;
  --a27-choice: 13px;
  /* KAN-489: tamaños táctiles; en estrecho (§13) sustituyen a los de escritorio. */
  --a27-touch: 40px;
  --a27-touch-switch-w: 44px;
  --a27-touch-switch-h: 24px;
  --a27-touch-switch-knob: 20px;
  --a27-touch-choice: 20px;
  --a27-badge: 20px;
  --a27-cell-input-min: 150px;
  --a27-thread-h: 480px;
  --a27-bubble-max: 80%;
  --a27-composer-max: 160px;
  --a27-preview-w: 320px;
  --a27-chat-max: 980px;
  --a27-chat-font: "Nunito", "Segoe UI", sans-serif;
  --a27-chat-text: 16px;
  --a27-chat-radius: 24px;
  --a27-chat-avatar: 48px;
  --a27-chat-bubble-max: 700px;
  --a27-chat-field-h: 56px;
  --a27-chat-send: 44px;

  font-family: var(--aizy-font-ui);
  font-size: var(--aizy-size-body-sm);
  line-height: var(--aizy-leading-body-sm);
  font-weight: var(--aizy-weight-body);
  color: var(--aizy-text);
  background: var(--aizy-bg);
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}
/* Noche: calendario y hora de los campos de fecha, desplegables y barras de scroll nativos en oscuro (KAN-450). */
.a27.ka-night { color-scheme: dark; }

/* 1. Base y texto ------------------------------------------------------- */
.a27 *,
.a27 *::before,
.a27 *::after { box-sizing: border-box; }
/* En producto .a27 va en <body>: sin este reset hereda el margen del navegador y deja un marco alrededor de la app (el lienzo lo resetea en dc()). */
.a27 { margin: 0; }
.a27 h1, .a27 h2, .a27 h3, .a27 p, .a27 dl, .a27 dd, .a27 figure, .a27 pre { margin: 0; }
.a27 ul, .a27 ol { margin: 0; padding: 0; list-style: none; }
.a27 a { color: var(--aizy-link); }
.a27 button, .a27 input, .a27 select, .a27 textarea { font: inherit; color: inherit; }
/* Estados por atributo nativo (hidden, <dialog open>, aria-*): ocultar es siempre hidden y gana a cualquier display de la hoja. */
.a27 [hidden] { display: none !important; }
.a27 :focus-visible { outline: var(--a27-indicator) solid var(--aizy-focus); outline-offset: var(--a27-focus-offset); box-shadow: var(--aizy-focus-ring); }
/* Dentro de contenedores que recortan (pestañas con scroll, segmentado, filas de la tarjeta, menú) el contorno va hacia dentro. */
.a27 .a27-page-tab:focus-visible,
.a27 .a27-segmented__item:focus-visible,
.a27 .a27-menu__item:focus-visible,
.a27 summary.a27-list__row:focus-visible { outline-offset: calc(-1 * var(--a27-indicator)); }

.a27 .a27-icon {
  display: inline-block;
  flex: none;
  font-family: "Material Symbols Outlined";
  font-size: var(--a27-icon);
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.a27 .a27-icon--sm { font-size: var(--a27-icon-sm); }
.a27 .a27-icon--xs { font-size: var(--a27-icon-xs); }

.a27 .a27-sr {
  position: absolute;
  width: var(--a27-hairline);
  height: var(--a27-hairline);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.a27 .a27-text--muted { color: var(--aizy-text-muted); }
.a27 .a27-text--dense { font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-text--strong { font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-text--mono { font-family: var(--aizy-font-mono); font-size: var(--aizy-size-dense); }
.a27 .a27-text--num { font-variant-numeric: tabular-nums; }
.a27 .a27-text--wrap { overflow-wrap: anywhere; }
.a27 .a27-text--pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.a27 .a27-text--danger { color: var(--aizy-danger-text); }
.a27 .a27-divider { width: 100%; margin: 0; border: 0; border-top: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-bullets { display: flex; flex-direction: column; gap: var(--aizy-space-4); padding-left: var(--aizy-space-20); list-style: disc; }
/* En columnas: tantas como quepan de --a27-field-min; la viñeta de cada columna cae en el hueco entre columnas (KAN-483). */
.a27 .a27-bullets--cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--a27-field-min), 1fr)); column-gap: var(--aizy-space-24); }

/* 2. Shell -------------------------------------------------------------- */
/* --bare: a27-app sin lateral; conserva el contenedor de las container queries (mismo container-name). */
.a27 .a27-app,
.a27.a27-app,
.a27 .a27-app--bare,
.a27.a27-app--bare {
  display: flex;
  min-height: var(--a27-viewport-h);
  container-type: inline-size;
  container-name: a27;
}
.a27 .a27-sidebar {
  display: flex;
  flex: 0 0 var(--a27-sidebar-w);
  flex-direction: column;
  gap: var(--aizy-space-16);
  padding: var(--aizy-space-16) var(--aizy-space-12);
  border-right: var(--a27-hairline) solid var(--aizy-border);
  background: var(--aizy-surface);
  /* Fijo al viewport: no crece con el contenido; si el menú no cabe, scroll propio. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: var(--a27-viewport-h);
  overflow-y: auto;
}
.a27 .a27-brand { display: flex; flex-direction: column; gap: var(--aizy-space-4); padding: var(--aizy-space-4) var(--aizy-space-8) var(--aizy-space-8); }
/* Logotipo: siempre la imagen de marca, nunca el nombre en texto.
   Día = relleno negro; noche = relleno blanco. */
.a27 .a27-logo { display: inline-flex; align-self: flex-start; line-height: 0; }
.a27 .a27-logo__img { display: block; width: auto; height: var(--a27-logo-h); }
.a27 .a27-logo--sm .a27-logo__img { height: var(--a27-logo-h-sm); }
.a27 .a27-logo--lg .a27-logo__img { height: var(--a27-logo-h-lg); }
.a27 .a27-logo__img--night { display: none; }
.a27.ka-night .a27-logo__img--day { display: none; }
.a27.ka-night .a27-logo__img--night { display: block; }
.a27 .a27-brand__product,
.a27 .a27-nav__group {
  color: var(--aizy-text-muted);
  font-size: var(--aizy-size-micro);
  line-height: var(--aizy-leading-micro);
  font-weight: var(--aizy-weight-title);
  letter-spacing: var(--a27-tracking-caps);
  text-transform: uppercase;
}
.a27 .a27-nav { display: flex; flex-direction: column; gap: var(--aizy-space-4); }
.a27 .a27-nav__section,
.a27 .a27-nav__items { display: flex; flex-direction: column; gap: var(--aizy-space-4); }
.a27 .a27-nav__items[hidden] { display: none; }
/* Grupo = botón que colapsa su sección (aria-expanded); el chevron apunta abajo si está abierta. */
.a27 .a27-nav__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aizy-space-8);
  width: 100%;
  min-height: var(--a27-tag-h);
  margin-top: var(--aizy-space-8);
  padding: 0 var(--aizy-space-8);
  border: 0;
  border-radius: var(--aizy-radius-sm);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.a27 .a27-nav__group:hover { color: var(--aizy-text); }
.a27 .a27-nav__group .a27-icon { transform: rotate(var(--a27-disclosure-turn)); transition: transform var(--a27-motion); }
.a27 .a27-nav__group[aria-expanded="false"] .a27-icon { transform: none; }
.a27 .a27-nav__item {
  display: flex;
  align-items: center;
  gap: var(--aizy-space-12);
  min-height: var(--a27-nav-item-h);
  padding: 0 var(--aizy-space-8);
  border-radius: var(--aizy-radius-sm);
  color: var(--aizy-text-muted);
  font-weight: var(--aizy-weight-emphasis);
  text-decoration: none;
}
.a27 .a27-nav__item:hover { background: var(--aizy-bg); color: var(--aizy-text); }
.a27 .a27-nav__item[aria-current="page"] { background: var(--aizy-action-tint); color: var(--aizy-action-hover); }
.a27 .a27-sidebar__foot { margin-top: auto; padding: 0 var(--aizy-space-8); color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
/* Botón que comprime y expande el lateral (Knowledge Admin), a la derecha del nombre del bot. Solo en ancho: en estrecho el
   lateral es la capa que abre el botón de menú de la barra superior. */
.a27 .a27-brand .a27-sidebar__toggle { display: none; }
/* --rail (Knowledge Admin): en ancho el lateral se comprime a solo iconos y el nombre de cada entrada pasa a un tooltip
   (data-tooltip). El ancho se anima; --expanding mantiene las etiquetas en una línea mientras vuelve a abrirse (lo quita el JS
   al acabar la transición). En estrecho no tiene efecto: el lateral sigue siendo la capa de --open. */
.a27 .a27-sidebar--rail,
.a27 .a27-sidebar--expanding { transition: flex-basis var(--a27-slide); }
.a27 .a27-sidebar--rail .a27-brand,
.a27 .a27-sidebar--expanding .a27-brand { transition: padding var(--a27-slide); }
.a27 .a27-sidebar--rail ~ .a27-main .a27-content,
.a27 .a27-sidebar--expanding ~ .a27-main .a27-content { transition: max-width var(--a27-slide); }
.a27 .a27-sidebar--expanding .a27-brand,
.a27 .a27-sidebar--expanding .a27-nav__item { overflow: hidden; white-space: nowrap; }
@container a27 (width > 760px) {
  .a27 .a27-brand:has(> .a27-sidebar__toggle) { flex-direction: row; align-items: center; gap: var(--aizy-space-8); }
  .a27 .a27-brand:has(> .a27-sidebar__toggle) > .a27-identity { flex: 1 1 auto; }
  .a27 .a27-brand .a27-sidebar__toggle { display: inline-flex; }
  .a27 .a27-sidebar--rail { z-index: var(--a27-z-menu); flex-basis: var(--a27-sidebar-rail-w); }
  /* El contenido gana el ancho que libera el lateral: su borde derecho no se mueve aunque ya esté en su tope. */
  .a27 .a27-sidebar--rail ~ .a27-main .a27-content { max-width: calc(var(--a27-content-max) + var(--a27-sidebar-w) - var(--a27-sidebar-rail-w)); }
  .a27 .a27-sidebar--rail .a27-brand,
  .a27 .a27-sidebar--rail .a27-nav__item { overflow: hidden; white-space: nowrap; }
  /* Comprimido: el botón baja bajo el avatar y su flecha apunta hacia fuera. */
  .a27 .a27-sidebar--rail .a27-brand { flex-direction: column; align-items: flex-start; padding-right: 0; padding-left: 0; }
  .a27 .a27-sidebar--rail .a27-sidebar__toggle { align-self: center; }
  .a27 .a27-sidebar--rail .a27-sidebar__toggle .a27-icon { scale: -1 1; }
  .a27 .a27-sidebar--rail .a27-nav__group,
  .a27 .a27-sidebar--rail .a27-sidebar__foot { display: none; }
  /* Sin títulos de grupo: una línea separa los grupos. */
  .a27 .a27-sidebar--rail .a27-nav__section + .a27-nav__section { padding-top: var(--aizy-space-4); border-top: var(--a27-hairline) solid var(--aizy-border); }
  .a27 .a27-sidebar--rail .a27-nav__item { padding: 0 calc((var(--a27-sidebar-rail-w) - var(--a27-hairline) - 2 * var(--aizy-space-12) - var(--a27-icon)) / 2); }
  /* Tooltip anclado a la entrada (fixed): sale del scroll del lateral sin que el JS calcule posiciones. Sin anchor positioning no hay tooltip. */
  @supports (anchor-name: --a27-nav-tip) {
    .a27 .a27-sidebar--rail .a27-nav__item:hover,
    .a27 .a27-sidebar--rail .a27-nav:not(:hover) .a27-nav__item:focus-visible { anchor-name: --a27-nav-tip; }
    .a27 .a27-sidebar--rail .a27-nav__item::after {
      content: attr(data-tooltip);
      position: fixed;
      position-anchor: --a27-nav-tip;
      top: anchor(center);
      left: anchor(right);
      /* Fuera del lateral: el margen interior y el borde que quedan a la derecha de la entrada, más la separación. */
      margin-left: calc(var(--aizy-space-12) + var(--a27-hairline) + var(--a27-tooltip-gap));
      padding: var(--aizy-space-4) var(--aizy-space-8);
      border-radius: var(--aizy-radius-sm);
      background: var(--aizy-text);
      color: var(--aizy-surface);
      font-size: var(--aizy-size-micro);
      line-height: var(--aizy-leading-micro);
      font-weight: var(--aizy-weight-emphasis);
      white-space: nowrap;
      translate: 0 -50%;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--a27-motion);
    }
    .a27 .a27-sidebar--rail .a27-nav__item:hover::after,
    .a27 .a27-sidebar--rail .a27-nav:not(:hover) .a27-nav__item:focus-visible::after { opacity: 1; }
    /* El del botón (a27-tooltip) también sale a la derecha del lateral, centrado en el botón. */
    .a27 .a27-sidebar--rail .a27-sidebar__toggle:hover,
    .a27 .a27-sidebar--rail .a27-sidebar__toggle:focus-visible { anchor-name: --a27-toggle-tip; }
    .a27 .a27-sidebar--rail .a27-sidebar__toggle::after {
      position: fixed;
      position-anchor: --a27-toggle-tip;
      top: anchor(center);
      right: auto;
      left: anchor(right);
      margin-left: calc((var(--a27-sidebar-rail-w) - var(--a27-hairline) - 2 * var(--aizy-space-12) - var(--a27-icon-btn)) / 2
        + var(--aizy-space-12) + var(--a27-hairline) + var(--a27-tooltip-gap));
      translate: 0 -50%;
    }
  }
}

/* Posicionado: ancla a27-busy-overlay cuando cubre la pantalla. */
.a27 .a27-main { position: relative; display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; }
.a27 .a27-topbar {
  display: flex;
  align-items: center;
  gap: var(--aizy-space-8);
  min-height: var(--a27-topbar-h);
  padding: 0 var(--aizy-space-24);
  border-bottom: var(--a27-hairline) solid var(--aizy-border);
  background: var(--aizy-surface);
}
.a27 .a27-topbar__menu,
.a27 .a27-topbar__brand { display: none; }
.a27 .a27-crumb { display: flex; flex: 1 1 auto; align-items: center; gap: var(--aizy-space-8); min-width: 0; color: var(--aizy-text-muted); font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-crumb a { color: var(--aizy-text-muted); text-decoration: none; }
.a27 .a27-crumb a:hover { color: var(--aizy-text); }
.a27 .a27-crumb [aria-current="page"] { color: var(--aizy-text); }
.a27 .a27-topbar__user { padding: 0 var(--aizy-space-8); color: var(--aizy-text-muted); font-weight: var(--aizy-weight-emphasis); white-space: nowrap; }
/* App sin lateral: el logotipo pasa a la barra superior en cualquier ancho, no hay botón de menú y el contenido es fluido. */
.a27 .a27-app--bare .a27-topbar__brand,
.a27.a27-app--bare .a27-topbar__brand { display: inline-flex; }
.a27 .a27-app--bare .a27-topbar__menu,
.a27.a27-app--bare .a27-topbar__menu { display: none; }
.a27 .a27-app--bare .a27-content,
.a27.a27-app--bare .a27-content { max-width: none; }

/* Barra de guardado: pegada al borde inferior de a27-main (hijo directo, tras el contenido). */
.a27 .a27-actionbar {
  position: sticky;
  bottom: 0;
  z-index: var(--a27-z-raised);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aizy-space-8) var(--aizy-space-12);
  margin-top: auto;
  padding: var(--aizy-space-12) var(--aizy-space-24);
  border-top: var(--a27-hairline) solid var(--aizy-border);
  background: var(--aizy-surface);
  transition: background var(--a27-motion), border-color var(--a27-motion);
}
.a27 .a27-actionbar__hint { flex: 1 1 auto; color: var(--aizy-text-muted); font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-actionbar .a27-actions { flex-wrap: nowrap; margin-left: auto; }
.a27 .a27-actionbar--attention { border-top-color: var(--aizy-warning-border); background: var(--aizy-warning-bg); }
.a27 .a27-actionbar--attention .a27-actionbar__hint { color: var(--aizy-warning-text); }

/* Espacio de trabajo: lista · principal · lateral, cada panel con su scroll. En estrecho (§13) un panel por vez. */
.a27 .a27-workspace {
  position: relative;
  display: grid;
  flex: 1 1 0;
  grid-template-columns: minmax(0, var(--a27-workspace-list-w)) minmax(var(--a27-workspace-main-min), 1fr) minmax(0, var(--a27-workspace-aside-w));
  grid-template-rows: minmax(0, 1fr);
  min-height: var(--a27-workspace-h);
}
.a27 .a27-workspace__list,
.a27 .a27-workspace__main,
.a27 .a27-workspace__aside { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
.a27 .a27-workspace__list { border-right: var(--a27-hairline) solid var(--aizy-border); background: var(--aizy-surface); }
/* Barras de la lista (pestañas y buscador): 12 px arriba, entre ellas y debajo, y 16 px a los lados. */
.a27 .a27-workspace__list > .a27-toolbar { padding: var(--aizy-space-12) var(--aizy-space-16); }
.a27 .a27-workspace__list > .a27-toolbar + .a27-toolbar { padding-top: 0; }
.a27 .a27-workspace__main { gap: var(--aizy-space-16); padding: var(--aizy-space-20); }
.a27 .a27-workspace__aside { gap: var(--aizy-space-16); padding: var(--aizy-space-20); border-left: var(--a27-hairline) solid var(--aizy-border); background: var(--aizy-surface); }
/* Volver e info solo existen en estrecho. */
.a27 .a27-workspace .a27-workspace__back,
.a27 .a27-workspace .a27-workspace__info { display: none; }

/* 3. Banda de página ---------------------------------------------------- */
.a27 .a27-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--aizy-space-16);
  padding: var(--aizy-space-24) var(--aizy-space-24) var(--aizy-space-20);
  border-bottom: var(--a27-hairline) solid var(--aizy-border);
  background: var(--aizy-surface);
}
.a27 .a27-page-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--aizy-space-16); }
.a27 .a27-page-head__text { display: flex; flex-direction: column; gap: var(--aizy-space-4); min-width: 0; }
/* Botón de retorno a la lista: primer hijo de la fila; con él, el título se queda a su lado y las acciones a la derecha. */
.a27 .a27-page-head__back + .a27-page-head__text { margin-right: auto; }
.a27 .a27-page-title { display: flex; align-items: center; gap: var(--aizy-space-12); font-size: var(--aizy-size-screen); line-height: var(--aizy-leading-screen); font-weight: var(--aizy-weight-title); letter-spacing: var(--a27-tracking-tight); }
.a27 .a27-page-title .a27-icon { font-size: var(--a27-icon-lg); color: var(--aizy-text-muted); }
.a27 .a27-page-sub { color: var(--aizy-text-muted); }
.a27 .a27-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-8); margin-top: var(--aizy-space-4); }
/* Interruptor de activación de la sección en la meta (KAN-486): compacto, etiqueta y control juntos a la izquierda. */
.a27 .a27-page-meta .a27-switch { justify-content: flex-start; align-items: center; padding: 0; }
.a27 .a27-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-8); }
.a27 .a27-page-tabs {
  display: flex;
  gap: var(--aizy-space-24);
  margin-bottom: calc(-1 * (var(--aizy-space-20) + var(--a27-hairline)));
  overflow-x: auto;
}
.a27 .a27-page-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--aizy-space-8);
  min-height: var(--a27-tab-h);
  border-bottom: var(--a27-indicator) solid transparent;
  color: var(--aizy-text-muted);
  font-weight: var(--aizy-weight-emphasis);
  text-decoration: none;
  white-space: nowrap;
}
.a27 .a27-page-tab .a27-icon { font-size: var(--a27-icon-sm); }
.a27 .a27-page-tab:hover { color: var(--aizy-text); }
.a27 .a27-page-tab[aria-current="page"] { border-bottom-color: var(--aizy-action); color: var(--aizy-text); }
.a27 .a27-page-tab[aria-current="page"] .a27-icon { color: var(--aizy-action); }

/* 4. Barra de filtros --------------------------------------------------- */
.a27 .a27-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-12); }
.a27 .a27-toolbar__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-8); margin-left: auto; }
/* Barra de filtros con campos (a27_filters): campos y «Aplicar» alineados por abajo. */
.a27 .a27-toolbar--fields { align-items: flex-end; }
.a27 .a27-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--aizy-space-12); }
.a27 .a27-search {
  display: flex;
  flex: 1 1 var(--a27-search-min);
  align-items: center;
  gap: var(--aizy-space-8);
  min-height: var(--a27-control-h);
  padding: 0 var(--aizy-space-12);
  border: var(--a27-hairline) solid var(--aizy-border-field);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
  color: var(--aizy-text-muted);
}
.a27 .a27-search:focus-within { border-color: var(--aizy-focus); outline: var(--a27-indicator) solid var(--aizy-focus); outline-offset: var(--a27-focus-offset); box-shadow: var(--aizy-focus-ring); }
.a27 .a27-search__input { flex: 1; min-width: 0; border: 0; outline: none; box-shadow: none; background: transparent; color: var(--aizy-text); }
.a27 .a27-chips { display: flex; flex-wrap: wrap; gap: var(--aizy-space-8); }
.a27 .a27-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--aizy-space-8);
  min-height: var(--a27-control-h-sm);
  padding: 0 var(--aizy-space-12);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-surface);
  color: var(--aizy-text-muted);
  font-size: var(--aizy-size-dense);
  font-weight: var(--aizy-weight-emphasis);
  text-decoration: none;
  cursor: pointer;
}
.a27 .a27-chip:hover { color: var(--aizy-text); }
.a27 .a27-chip[aria-pressed="true"] { border-color: var(--aizy-action); background: var(--aizy-action-tint); color: var(--aizy-action-hover); }
.a27 .a27-chip__count { font-weight: var(--aizy-weight-title); font-variant-numeric: tabular-nums; }
.a27 .a27-segmented { display: inline-flex; overflow: hidden; border: var(--a27-hairline) solid var(--aizy-border); border-radius: var(--aizy-radius-sm); background: var(--aizy-surface); }
.a27 .a27-segmented__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--a27-control-h-sm);
  padding: 0 var(--aizy-space-12);
  border: 0;
  background: transparent;
  color: var(--aizy-text-muted);
  font-size: var(--aizy-size-dense);
  font-weight: var(--aizy-weight-emphasis);
  text-decoration: none;
  cursor: pointer;
}
.a27 .a27-segmented__item + .a27-segmented__item { border-left: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-segmented__item[aria-pressed="true"] { background: var(--aizy-action-tint); color: var(--aizy-action-hover); }
/* Suelto en el cuerpo de una tarjeta (columna flex) el stretch lo estiraba a todo el ancho: queda al de sus opciones. */
.a27 .a27-card__body > .a27-segmented { align-self: flex-start; }
.a27 .a27-stats { display: flex; flex-wrap: wrap; gap: var(--aizy-space-24); }
.a27 .a27-stat { display: flex; align-items: baseline; gap: var(--aizy-space-8); }
.a27 .a27-stat__label { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-stat__value { font-weight: var(--aizy-weight-title); font-variant-numeric: tabular-nums; }

/* 5. Contenido y rejilla ------------------------------------------------ */
.a27 .a27-content { display: flex; flex-direction: column; gap: var(--aizy-space-20); width: 100%; max-width: var(--a27-content-max); padding: var(--aizy-space-24); }
.a27 .a27-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--aizy-space-20); }
.a27 .a27-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a27 .a27-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a27 .a27-grid--aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.a27 .a27-stack { display: flex; flex-direction: column; gap: var(--aizy-space-20); min-width: 0; }

/* 6. Tarjeta ------------------------------------------------------------
   Anatomía fija: __head (heading + aside) · __body | __body--flush · __foot.
   La nota va siempre debajo del título; lo que guarda o ejecuta, en __foot. */
.a27 .a27-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
  box-shadow: var(--aizy-shadow-1);
}
.a27 .a27-card--danger { border-color: var(--aizy-danger-border); }
.a27 .a27-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--aizy-space-12); padding: var(--aizy-space-16) var(--aizy-space-20); }
.a27 .a27-card__heading { display: flex; flex-direction: column; gap: var(--aizy-space-4); min-width: 0; }
.a27 .a27-card__title { display: flex; align-items: center; gap: var(--aizy-space-8); font-size: var(--aizy-size-title-sm); line-height: var(--aizy-leading-title-sm); font-weight: var(--aizy-weight-title); }
.a27 .a27-card__title .a27-icon { color: var(--aizy-text-muted); }
.a27 .a27-card--danger .a27-card__title .a27-icon { color: var(--aizy-danger-text); }
.a27 .a27-card__note { color: var(--aizy-text-muted); }
.a27 .a27-card__aside { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aizy-space-8); }
.a27 .a27-card__body { display: flex; flex-direction: column; gap: var(--aizy-space-16); padding: 0 var(--aizy-space-20) var(--aizy-space-20); }
.a27 .a27-card__body--flush { gap: 0; padding: 0; border-top: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--aizy-space-8);
  padding: var(--aizy-space-12) var(--aizy-space-20);
  border-top: var(--a27-hairline) solid var(--aizy-border);
}
.a27 .a27-card__foot-note { margin-right: auto; color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-section { position: relative; display: flex; flex-direction: column; gap: var(--aizy-space-12); }
.a27 .a27-section + .a27-section { padding-top: var(--aizy-space-16); border-top: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-section__title { display: flex; align-items: center; gap: var(--aizy-space-8); font-size: var(--aizy-size-body); line-height: var(--aizy-leading-body); font-weight: var(--aizy-weight-title); }
.a27 .a27-section__title .a27-icon { font-size: var(--a27-icon-sm); color: var(--aizy-text-muted); }
.a27 .a27-section__note { color: var(--aizy-text-muted); }
/* Subsección: 8 px entre su título, sus textos y sus controles; 12 px antes de sus botones y 16 px entre dos seguidas (KAN-485). */
.a27 .a27-subsection { position: relative; display: flex; flex-direction: column; gap: var(--aizy-space-8); }
.a27 .a27-subsection + .a27-subsection { margin-top: var(--aizy-space-16); }
.a27 .a27-subsection > .a27-actions { margin-top: var(--aizy-space-4); }
.a27 .a27-subsection__title {
  color: var(--aizy-text-muted);
  font-size: var(--aizy-size-micro);
  line-height: var(--aizy-leading-micro);
  font-weight: var(--aizy-weight-title);
  letter-spacing: var(--a27-tracking-caps);
  text-transform: uppercase;
}

/* 7. Formulario --------------------------------------------------------- */
.a27 .a27-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aizy-space-16); }
.a27 .a27-field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a27 .a27-field { position: relative; display: flex; flex-direction: column; gap: var(--aizy-space-8); min-width: 0; }
.a27 .a27-field--full { grid-column: 1 / -1; }
.a27 .a27-label {
  color: var(--aizy-text);
  font-size: var(--aizy-size-dense);
  line-height: var(--aizy-leading-dense);
  font-weight: var(--aizy-weight-title);
  letter-spacing: var(--a27-tracking-caps);
  text-transform: uppercase;
}
.a27 .a27-help { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-error { color: var(--aizy-danger-text); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-input,
.a27 .a27-select,
.a27 .a27-textarea {
  width: 100%;
  min-height: var(--a27-control-h);
  padding: 0 var(--aizy-space-12);
  border: var(--a27-hairline) solid var(--aizy-border-field);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
  color: var(--aizy-text);
}
.a27 .a27-textarea { min-height: calc(var(--a27-control-h) * 3); padding: var(--aizy-space-12); resize: vertical; }
.a27 .a27-input:focus-visible,
.a27 .a27-select:focus-visible,
.a27 .a27-textarea:focus-visible { border-color: var(--aizy-focus); }
.a27 .a27-input::placeholder,
.a27 .a27-textarea::placeholder,
.a27 .a27-search__input::placeholder { color: var(--aizy-text-muted); opacity: 1; }
.a27 .a27-input[aria-invalid="true"] { border-color: var(--aizy-danger); }
.a27 .a27-input[readonly],
.a27 .a27-input:disabled,
.a27 .a27-select:disabled { background: var(--aizy-bg); color: var(--aizy-text-muted); }
/* Campos dentro de tarjetas y diálogos: relleno (rol --aizy-field-bg) para que se lean como sitio donde escribir o
   elegir; el borde sigue siendo --aizy-border-field (3:1) y, al enfocar, vuelven a la superficie con el anillo de foco.
   En la barra de filtros, sobre el fondo, se quedan como el control base. De noche el rol devuelve el control base. */
.a27 .a27-card .a27-input,
.a27 .a27-card .a27-select,
.a27 .a27-card .a27-textarea,
.a27 .a27-card .a27-input-group,
.a27 .a27-card .a27-search,
.a27 .a27-card .a27-multiselect__trigger,
.a27 .a27-dialog .a27-input,
.a27 .a27-dialog .a27-select,
.a27 .a27-dialog .a27-textarea,
.a27 .a27-dialog .a27-input-group,
.a27 .a27-dialog .a27-search,
.a27 .a27-dialog .a27-multiselect__trigger { background: var(--aizy-field-bg); }
.a27 .a27-card .a27-input-group .a27-input,
.a27 .a27-dialog .a27-input-group .a27-input { background: transparent; }
.a27 .a27-card .a27-input:focus-visible,
.a27 .a27-card .a27-select:focus-visible,
.a27 .a27-card .a27-textarea:focus-visible,
.a27 .a27-dialog .a27-input:focus-visible,
.a27 .a27-dialog .a27-select:focus-visible,
.a27 .a27-dialog .a27-textarea:focus-visible,
.a27 .a27-card .a27-input-group:focus-within,
.a27 .a27-card .a27-search:focus-within,
.a27 .a27-dialog .a27-input-group:focus-within,
.a27 .a27-dialog .a27-search:focus-within { background: var(--aizy-surface); }
.a27 .a27-card .a27-input:disabled,
.a27 .a27-card .a27-select:disabled,
.a27 .a27-card .a27-textarea:disabled,
.a27 .a27-dialog .a27-input:disabled,
.a27 .a27-dialog .a27-select:disabled,
.a27 .a27-dialog .a27-textarea:disabled { background: var(--aizy-bg); }
.a27 .a27-input--code { max-width: var(--a27-code-w); font-family: var(--aizy-font-mono); letter-spacing: var(--a27-tracking-code); text-align: center; }
.a27 .a27-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--aizy-space-12); }
.a27 .a27-inline-form .a27-field { flex: 1 1 var(--a27-field-min); }
.a27 .a27-choice { display: flex; align-items: center; gap: var(--aizy-space-8); cursor: pointer; }
.a27 .a27-choice input { flex: none; width: var(--a27-choice); height: var(--a27-choice); margin: 0; accent-color: var(--aizy-action); }
.a27 .a27-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--aizy-space-16); padding: var(--aizy-space-12) 0; }
.a27 .a27-switch + .a27-switch { border-top: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-switch__text { display: flex; flex-direction: column; gap: var(--aizy-space-4); min-width: 0; }
.a27 .a27-switch__label { font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-switch__control {
  position: relative;
  flex: none;
  width: var(--a27-switch-w);
  height: var(--a27-switch-h);
  margin: 0;
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-border-field);
  appearance: none;
  cursor: pointer;
  transition: background var(--a27-motion);
}
.a27 .a27-switch__control::before {
  content: "";
  position: absolute;
  top: var(--a27-switch-inset);
  left: var(--a27-switch-inset);
  width: var(--a27-switch-knob);
  height: var(--a27-switch-knob);
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-surface);
  transition: transform var(--a27-motion);
}
.a27 .a27-switch__control:checked { background: var(--aizy-action); }
.a27 .a27-switch__control:checked::before { transform: translateX(calc(var(--a27-switch-w) - var(--a27-switch-knob) - var(--a27-switch-inset) * 2)); }
.a27 .a27-switch__control:disabled { opacity: .5; cursor: not-allowed; }

/* 7b. Formulario avanzado ------------------------------------------------
   Campos compuestos: multiidioma, color, grupo de entrada, archivo, deslizador,
   editor, selector múltiple, combo y paletas. Los estados van por atributo
   nativo (hidden, disabled, aria-*); los modificadores solo varían o animan. */

/* Filas repetibles: a27-inline-form con el modificador agrupa filas a27-inline-form separadas por una línea. */
.a27 .a27-inline-form--divided { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.a27 .a27-inline-form--divided > .a27-inline-form { padding: var(--aizy-space-12) 0; }
.a27 .a27-inline-form--divided > .a27-inline-form:first-child { padding-top: 0; }
.a27 .a27-inline-form--divided > .a27-inline-form + .a27-inline-form { border-top: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-inline-form--divided > .a27-inline-form > .a27-icon-btn { margin-bottom: calc((var(--a27-control-h) - var(--a27-icon-btn)) / 2); }
.a27 .a27-inline-form--divided > .a27-actions { padding-top: var(--aizy-space-12); border-top: var(--a27-hairline) solid var(--aizy-border); }

/* Campo multiidioma: un solo control visible por idioma (hidden en el resto). */
.a27 .a27-lang-field { display: flex; flex-direction: column; gap: var(--aizy-space-8); min-width: 0; }
.a27 .a27-lang-field--panel { padding: var(--aizy-space-16); border: var(--a27-hairline) solid var(--aizy-border); border-radius: var(--aizy-radius-md); background: var(--aizy-bg); }
.a27 .a27-lang-field__stack { display: flex; flex-direction: column; min-width: 0; }
.a27 .a27-lang-field__set { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--aizy-space-8); }
.a27 .a27-lang-field--multi .a27-lang-field__set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a27 .a27-lang-field__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-12); }
.a27 .a27-lang-field__select { width: auto; min-width: var(--a27-lang-select-w); min-height: var(--a27-control-h-sm); padding: 0 var(--aizy-space-8); font-size: var(--aizy-size-dense); font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-lang-field__translate[aria-busy="true"] { color: var(--aizy-text-muted); pointer-events: none; }
.a27 .a27-lang-field__status { display: inline-flex; align-items: center; }

/* Campo de color: texto hex en mono + selector nativo. */
.a27 .a27-color-field { display: flex; align-items: center; gap: var(--aizy-space-8); }
.a27 .a27-color-field__hex { flex: none; width: var(--a27-color-hex-w); font-family: var(--aizy-font-mono); font-size: var(--aizy-size-dense); }
.a27 .a27-color-field__picker {
  flex: none;
  width: var(--a27-color-picker-w);
  height: var(--a27-control-h);
  margin: 0;
  padding: var(--aizy-space-4);
  border: var(--a27-hairline) solid var(--aizy-border-field);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
  appearance: none;
  cursor: pointer;
}
.a27 .a27-color-field__picker::-webkit-color-swatch-wrapper { padding: 0; }
.a27 .a27-color-field__picker::-webkit-color-swatch { border: 0; border-radius: var(--aizy-radius-sm); }
.a27 .a27-color-field__picker::-moz-color-swatch { border: 0; border-radius: var(--aizy-radius-sm); }
.a27 .a27-color-field--compact .a27-color-field__hex { width: var(--a27-color-hex-w-sm); min-height: var(--a27-control-h-sm); }
.a27 .a27-color-field--compact .a27-color-field__picker { width: var(--a27-control-h-sm); height: var(--a27-control-h-sm); padding: var(--aizy-space-4); border-radius: var(--aizy-radius-sm); }
.a27 .a27-color-field--compact .a27-color-field__picker::-webkit-color-swatch { border-radius: var(--aizy-radius-sm); }

/* Grupo de entrada: una caja con el borde del control; el anillo de foco lo pinta la caja. */
.a27 .a27-input-group {
  display: flex;
  align-items: center;
  min-height: var(--a27-control-h);
  border: var(--a27-hairline) solid var(--aizy-border-field);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
}
.a27 .a27-input-group:focus-within { border-color: var(--aizy-focus); outline: var(--a27-indicator) solid var(--aizy-focus); outline-offset: var(--a27-focus-offset); box-shadow: var(--aizy-focus-ring); }
.a27 .a27-input-group:has(.a27-input[aria-invalid="true"]) { border-color: var(--aizy-danger); }
.a27 .a27-input-group .a27-input { flex: 1 1 auto; min-width: 0; min-height: calc(var(--a27-control-h) - 2 * var(--a27-hairline)); border: 0; border-radius: 0; background: transparent; }
.a27 .a27-input-group .a27-input:focus-visible { outline: none; box-shadow: none; }
.a27 .a27-input-group__prefix,
.a27 .a27-input-group__suffix {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--aizy-space-12);
  background: var(--aizy-bg);
  color: var(--aizy-text-muted);
  white-space: nowrap;
}
.a27 .a27-input-group__prefix { border-right: var(--a27-hairline) solid var(--aizy-border); border-radius: calc(var(--aizy-radius-md) - var(--a27-hairline)) 0 0 calc(var(--aizy-radius-md) - var(--a27-hairline)); }
.a27 .a27-input-group__suffix { border-left: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-input-group__suffix:last-child { border-radius: 0 calc(var(--aizy-radius-md) - var(--a27-hairline)) calc(var(--aizy-radius-md) - var(--a27-hairline)) 0; }
.a27 .a27-input-group__unit { flex: none; width: auto; align-self: stretch; min-height: 0; border: 0; border-left: var(--a27-hairline) solid var(--aizy-border); border-radius: 0; background: var(--aizy-bg); }
.a27 .a27-input-group__unit:last-child { border-radius: 0 calc(var(--aizy-radius-md) - var(--a27-hairline)) calc(var(--aizy-radius-md) - var(--a27-hairline)) 0; }
.a27 .a27-input-group > .a27-icon-btn { margin-right: var(--aizy-space-4); }
.a27 .a27-input-group--copy { background: var(--aizy-bg); }
.a27 .a27-input-group--copy .a27-input { font-family: var(--aizy-font-mono); font-size: var(--aizy-size-dense); }

/* Archivo: el input real queda oculto a la vista pero enfocable; el a27-btn (label) lo abre. */
.a27 .a27-file { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-8) var(--aizy-space-12); min-width: 0; }
.a27 .a27-file__input { position: absolute; width: var(--a27-hairline); height: var(--a27-hairline); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a27 .a27-file__input:focus-visible + .a27-file__button { outline: var(--a27-indicator) solid var(--aizy-focus); outline-offset: var(--a27-focus-offset); box-shadow: var(--aizy-focus-ring); }
.a27 .a27-file__input:disabled + .a27-file__button { opacity: var(--a27-disabled); cursor: not-allowed; }
.a27 .a27-file__name { min-width: 0; font-weight: var(--aizy-weight-emphasis); overflow-wrap: anywhere; }
.a27 .a27-file__name:empty::before { content: attr(data-placeholder); color: var(--aizy-text-muted); font-weight: var(--aizy-weight-body); }
.a27 .a27-file__hint { flex: 1 0 100%; color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-file--dropzone {
  flex-direction: column;
  justify-content: center;
  min-height: var(--a27-dropzone-h);
  padding: var(--aizy-space-20);
  border: var(--a27-hairline) dashed var(--aizy-border-field);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-bg);
  text-align: center;
}
.a27 .a27-file--dropzone .a27-file__hint { flex: none; }
.a27 .a27-file--over { border-color: var(--aizy-action); background: var(--aizy-action-tint); }
.a27 .a27-file__prompt { display: inline-flex; align-items: center; gap: var(--aizy-space-8); color: var(--aizy-text-muted); font-weight: var(--aizy-weight-emphasis); }

/* Deslizador: control nativo con accent-color; valor visible y pista dinámica debajo. */
.a27 .a27-range { display: flex; flex-direction: column; gap: var(--aizy-space-8); min-width: 0; }
.a27 .a27-range__row { display: flex; align-items: center; gap: var(--aizy-space-12); }
.a27 .a27-range__input { flex: 1 1 auto; min-width: 0; height: var(--a27-range-h); margin: 0; accent-color: var(--aizy-action); cursor: pointer; }
.a27 .a27-range__input:disabled { opacity: var(--a27-disabled); cursor: not-allowed; }
.a27 .a27-range__value { flex: none; min-width: var(--a27-range-value-w); font-weight: var(--aizy-weight-title); font-variant-numeric: tabular-nums; text-align: right; }
.a27 .a27-range__hint,
.a27 .a27-range__note { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-range__note { display: flex; align-items: center; gap: var(--aizy-space-8); }

/* Editor enriquecido: la caja pinta el borde y el anillo de foco; la superficie edita. */
.a27 .a27-editor { display: flex; flex-direction: column; min-width: 0; border: var(--a27-hairline) solid var(--aizy-border-field); border-radius: var(--aizy-radius-md); background: var(--aizy-surface); }
.a27 .a27-editor:focus-within { border-color: var(--aizy-focus); outline: var(--a27-indicator) solid var(--aizy-focus); outline-offset: var(--a27-focus-offset); box-shadow: var(--aizy-focus-ring); }
.a27 .a27-editor--over { border-color: var(--aizy-action); border-style: dashed; }
.a27 .a27-editor--over .a27-editor__surface { background: var(--aizy-action-tint); }
.a27 .a27-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aizy-space-8);
  padding: var(--aizy-space-8);
  border-bottom: var(--a27-hairline) solid var(--aizy-border);
  border-radius: calc(var(--aizy-radius-md) - var(--a27-hairline)) calc(var(--aizy-radius-md) - var(--a27-hairline)) 0 0;
  background: var(--aizy-bg);
}
.a27 .a27-editor__group { display: flex; align-items: center; gap: var(--aizy-space-4); }
.a27 .a27-editor__group + .a27-editor__group { padding-left: var(--aizy-space-8); border-left: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-editor__toolbar .a27-select { width: auto; min-height: var(--a27-control-h-sm); padding: 0 var(--aizy-space-8); font-size: var(--aizy-size-dense); }
.a27 .a27-editor__toolbar .a27-icon-btn[aria-pressed="true"] { background: var(--aizy-action-tint); color: var(--aizy-action-hover); }
.a27 .a27-editor__toolbar > .a27-segmented { margin-left: auto; }
.a27 .a27-editor__surface {
  min-height: var(--a27-editor-h);
  max-height: var(--a27-editor-max-h);
  padding: var(--aizy-space-16);
  overflow-y: auto;
  border-radius: 0 0 calc(var(--aizy-radius-md) - var(--a27-hairline)) calc(var(--aizy-radius-md) - var(--a27-hairline));
  font-size: var(--aizy-size-body);
  line-height: var(--aizy-leading-body);
  overflow-wrap: anywhere;
}
.a27 .a27-editor__surface:focus-visible { outline: none; box-shadow: none; }
.a27 .a27-editor__surface:empty::before { content: attr(data-placeholder); color: var(--aizy-text-muted); pointer-events: none; }
.a27 .a27-editor__surface > * { margin: 0; }
.a27 .a27-editor__surface > * + * { margin-top: var(--aizy-space-12); }
.a27 .a27-editor__surface h1 { font-size: var(--aizy-size-title); line-height: var(--aizy-leading-title); font-weight: var(--aizy-weight-title); letter-spacing: var(--a27-tracking-tight); }
.a27 .a27-editor__surface h2 { font-size: var(--aizy-size-title-sm); line-height: var(--aizy-leading-title-sm); font-weight: var(--aizy-weight-title); }
.a27 .a27-editor__surface h3 { font-weight: var(--aizy-weight-title); }
.a27 .a27-editor__surface h4 { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); font-weight: var(--aizy-weight-title); letter-spacing: var(--a27-tracking-caps); text-transform: uppercase; }
.a27 .a27-editor__surface ul,
.a27 .a27-editor__surface ol { padding-left: var(--aizy-space-24); }
.a27 .a27-editor__surface ul { list-style: disc; }
.a27 .a27-editor__surface ol { list-style: decimal; }
.a27 .a27-editor__surface li + li { margin-top: var(--aizy-space-4); }
.a27 .a27-editor__surface blockquote { padding-left: var(--aizy-space-16); border-left: calc(2 * var(--a27-indicator)) solid var(--aizy-border-field); color: var(--aizy-text-muted); }
.a27 .a27-editor__surface code,
.a27 .a27-editor__surface pre { font-family: var(--aizy-font-mono); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-editor__surface code { padding: 0 var(--aizy-space-4); border-radius: var(--aizy-radius-sm); background: var(--aizy-bg); }
.a27 .a27-editor__surface pre { padding: var(--aizy-space-12); overflow: auto; border: var(--a27-hairline) solid var(--aizy-border); border-radius: var(--aizy-radius-sm); background: var(--aizy-bg); white-space: pre-wrap; }
.a27 .a27-editor__surface pre code { padding: 0; background: transparent; }
.a27 .a27-editor__surface a { color: var(--aizy-link); text-decoration: underline; }
.a27 .a27-editor__surface img { display: block; max-width: 100%; max-height: var(--a27-editor-img-max-h); height: auto; border-radius: var(--aizy-radius-sm); }
.a27 .a27-editor__video { display: block; width: 100%; aspect-ratio: var(--a27-embed-ratio); border: 0; border-radius: var(--aizy-radius-sm); background: var(--aizy-bg); }
.a27 .a27-editor--markdown .a27-editor__surface { font-family: var(--aizy-font-mono); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); white-space: pre-wrap; }
/* Ficha de tarea: pastilla en línea dentro del texto. */
.a27 .a27-token {
  display: inline-flex;
  align-items: center;
  gap: var(--aizy-space-4);
  padding: 0 var(--aizy-space-8);
  border: var(--a27-hairline) solid var(--aizy-info-border);
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-info-bg);
  color: var(--aizy-info-text);
  font-size: var(--aizy-size-dense);
  line-height: var(--aizy-leading-body);
  font-weight: var(--aizy-weight-emphasis);
  white-space: nowrap;
  vertical-align: baseline;
}
.a27 .a27-token .a27-icon { font-size: var(--a27-icon-xs); }

/* Selector múltiple: disparador con aspecto de control y popover de casillas. */
.a27 .a27-multiselect { position: relative; width: 100%; }
.a27 .a27-multiselect__trigger {
  display: flex;
  align-items: center;
  gap: var(--aizy-space-8);
  width: 100%;
  min-height: var(--a27-control-h);
  padding: var(--aizy-space-4) var(--aizy-space-12);
  border: var(--a27-hairline) solid var(--aizy-border-field);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
  color: var(--aizy-text);
  text-align: left;
  cursor: pointer;
}
.a27 .a27-multiselect__trigger[aria-expanded="true"] { border-color: var(--aizy-focus); }
.a27 .a27-multiselect__trigger > .a27-icon { color: var(--aizy-text-muted); transition: transform var(--a27-motion); }
.a27 .a27-multiselect__trigger[aria-expanded="true"] > .a27-icon { transform: rotate(var(--a27-flip)); }
.a27 .a27-multiselect__values { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-4); min-width: 0; }
.a27 .a27-multiselect__count { flex: none; color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); font-weight: var(--aizy-weight-emphasis); font-variant-numeric: tabular-nums; }
.a27 .a27-multiselect__popup {
  position: absolute;
  top: calc(100% + var(--a27-tooltip-gap));
  right: 0;
  left: 0;
  z-index: var(--a27-z-menu);
  display: flex;
  flex-direction: column;
  gap: var(--aizy-space-4);
  max-height: var(--a27-menu-h);
  padding: var(--aizy-space-8);
  overflow-y: auto;
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface-raised);
  box-shadow: var(--aizy-shadow-3);
}
.a27 .a27-multiselect__option { display: flex; align-items: flex-start; gap: var(--aizy-space-12); padding: var(--aizy-space-8) var(--aizy-space-12); border-radius: var(--aizy-radius-sm); cursor: pointer; }
.a27 .a27-multiselect__option:hover { background: var(--aizy-bg); }
.a27 .a27-multiselect__option:has(input:disabled) { opacity: var(--a27-disabled); cursor: not-allowed; }
.a27 .a27-multiselect__option input { flex: none; margin: var(--aizy-space-4) 0 0; accent-color: var(--aizy-action); }
.a27 .a27-multiselect__text { display: flex; flex-direction: column; min-width: 0; }
.a27 .a27-multiselect__name { font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-multiselect__desc { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }

/* Combo con búsqueda: a27-search de entrada y popup con lista de opciones. */
.a27 .a27-combobox { position: relative; width: 100%; }
.a27 .a27-combobox__popup {
  position: absolute;
  top: calc(100% + var(--a27-tooltip-gap));
  right: 0;
  left: 0;
  z-index: var(--a27-z-menu);
  display: flex;
  flex-direction: column;
  max-height: var(--a27-menu-h);
  overflow: hidden;
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface-raised);
  box-shadow: var(--aizy-shadow-3);
}
.a27 .a27-combobox__summary { flex: none; padding: var(--aizy-space-8) var(--aizy-space-12); border-bottom: var(--a27-hairline) solid var(--aizy-border); color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-combobox__list { display: flex; flex-direction: column; gap: var(--aizy-space-4); min-height: 0; padding: var(--aizy-space-4); overflow-y: auto; }
.a27 .a27-combobox__option { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-4) var(--aizy-space-12); padding: var(--aizy-space-8) var(--aizy-space-12); border-radius: var(--aizy-radius-sm); cursor: pointer; }
.a27 .a27-combobox__option:hover { background: var(--aizy-bg); }
.a27 .a27-combobox__option[aria-selected="true"] { background: var(--aizy-action-tint); color: var(--aizy-action-hover); }
.a27 .a27-combobox__option[aria-disabled="true"] { opacity: var(--a27-disabled); cursor: not-allowed; }
.a27 .a27-combobox__name { font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-combobox__code { color: var(--aizy-text-muted); font-family: var(--aizy-font-mono); font-size: var(--aizy-size-dense); overflow-wrap: anywhere; }
.a27 .a27-combobox__tags { display: flex; flex-wrap: wrap; gap: var(--aizy-space-4); margin-left: auto; }

/* Paletas: la opción es un grupo con un botón aria-pressed que la cubre entera (enlace estirado) y las muestras
   como hermanas del botón; los colores se ven solo como input color nativo (nunca style). */
.a27 .a27-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--a27-palette-min), 1fr)); gap: var(--aizy-space-12); }
.a27 .a27-palette__option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--aizy-space-8);
  min-width: 0;
  padding: var(--aizy-space-12);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
  color: var(--aizy-text);
}
.a27 .a27-palette__option:hover { background: var(--aizy-bg); }
.a27 .a27-palette__option:has(> .a27-palette__pick[aria-pressed="true"]) { border-color: var(--aizy-action); background: var(--aizy-action-tint); }
.a27 .a27-palette__option:has(> .a27-palette__pick:focus-visible) { outline: var(--a27-indicator) solid var(--aizy-focus); outline-offset: var(--a27-focus-offset); box-shadow: var(--aizy-focus-ring); }
.a27 .a27-palette__pick { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.a27 .a27-palette__pick:focus-visible { outline: none; box-shadow: none; }
.a27 .a27-palette__pick::after { content: ""; position: absolute; inset: 0; }
.a27 .a27-palette__name { font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-palette__swatches { display: flex; gap: var(--aizy-space-4); }
.a27 .a27-palette__swatch {
  flex: none;
  width: var(--a27-swatch);
  height: var(--a27-swatch);
  margin: 0;
  padding: 0;
  border: var(--a27-hairline) solid var(--aizy-border-field);
  border-radius: var(--aizy-radius-sm);
  background: transparent;
  opacity: 1;
  appearance: none;
  /* Sin eventos: el clic llega al botón que cubre la opción. */
  pointer-events: none;
}
.a27 .a27-palette__swatch::-webkit-color-swatch-wrapper { padding: 0; }
.a27 .a27-palette__swatch::-webkit-color-swatch { border: 0; border-radius: calc(var(--aizy-radius-sm) - var(--a27-hairline)); }
.a27 .a27-palette__swatch::-moz-color-swatch { border: 0; border-radius: calc(var(--aizy-radius-sm) - var(--a27-hairline)); }

/* 8. Acciones ----------------------------------------------------------- */
.a27 .a27-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-8); }
.a27 .a27-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aizy-space-8);
  min-height: var(--a27-control-h);
  padding: 0 var(--aizy-space-16);
  border: var(--a27-hairline) solid var(--aizy-border-field);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
  color: var(--aizy-text);
  font-weight: var(--aizy-weight-emphasis);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.a27 .a27-btn .a27-icon { font-size: var(--a27-icon-sm); }
.a27 .a27-btn:hover { background: var(--aizy-bg); }
.a27 .a27-btn--primary { border-color: var(--aizy-action); background: var(--aizy-action); color: var(--aizy-on-action); }
.a27 .a27-btn--primary:hover { border-color: var(--aizy-action-hover); background: var(--aizy-action-hover); }
.a27 .a27-btn--danger { border-color: var(--aizy-danger-border); color: var(--aizy-danger-text); }
.a27 .a27-btn--danger:hover { border-color: var(--aizy-danger); background: var(--aizy-danger-bg); }
.a27 .a27-btn--danger-solid { border-color: var(--aizy-danger); background: var(--aizy-danger); color: var(--aizy-on-action); }
.a27 .a27-btn--soft { border-color: var(--aizy-info-border); background: var(--aizy-action-tint); color: var(--aizy-action-hover); }
.a27 .a27-btn--soft:hover { border-color: var(--aizy-action); background: var(--aizy-action-tint); }
.a27 .a27-btn--ghost { border-color: transparent; background: transparent; color: var(--aizy-text-muted); }
.a27 .a27-btn--ghost:hover { color: var(--aizy-text); }
/* Botón «Continuar con Google» (directrices de Google): superficie, borde fino y la «G» a todo color a la izquierda. */
.a27 .a27-btn--google { border-color: var(--aizy-border-field); background: var(--aizy-surface); color: var(--aizy-text); }
.a27 .a27-btn--sm { min-height: var(--a27-control-h-sm); padding: 0 var(--aizy-space-12); font-size: var(--aizy-size-dense); }
.a27 .a27-btn:disabled,
.a27 .a27-btn[aria-disabled="true"] { opacity: var(--a27-disabled); cursor: not-allowed; }
.a27 .a27-icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--a27-icon-btn);
  height: var(--a27-icon-btn);
  padding: 0;
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-sm);
  background: var(--aizy-surface);
  color: var(--aizy-text-muted);
  text-decoration: none;
  cursor: pointer;
}
.a27 .a27-icon-btn .a27-icon { font-size: var(--a27-icon-sm); }
.a27 .a27-icon-btn:hover { background: var(--aizy-bg); color: var(--aizy-text); }
.a27 .a27-icon-btn--lg { width: var(--a27-icon-btn-lg); height: var(--a27-icon-btn-lg); }
.a27 .a27-icon-btn--lg .a27-icon { font-size: var(--a27-icon); }
.a27 .a27-icon-btn--ghost { border-color: transparent; background: transparent; }
.a27 .a27-icon-btn--soft { border-color: transparent; background: var(--aizy-action-tint); color: var(--aizy-action-hover); }
.a27 .a27-icon-btn--soft:hover { border-color: var(--aizy-info-border); background: var(--aizy-action-tint); color: var(--aizy-action); }
.a27 .a27-icon-btn--danger { color: var(--aizy-danger-text); }
.a27 .a27-icon-btn:disabled,
.a27 .a27-icon-btn[aria-disabled="true"] { opacity: var(--a27-disabled); cursor: not-allowed; }
.a27 .a27-link { display: inline-flex; align-items: center; gap: var(--aizy-space-4); color: var(--aizy-link); font-weight: var(--aizy-weight-emphasis); text-decoration: none; }
.a27 .a27-link:hover { text-decoration: underline; }
.a27 .a27-link .a27-icon { font-size: var(--a27-icon-sm); }

/* 9. Estado ------------------------------------------------------------- */
.a27 .a27-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--aizy-space-4);
  min-height: var(--a27-tag-h);
  padding: 0 var(--aizy-space-8);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-bg);
  color: var(--aizy-text-muted);
  font-size: var(--aizy-size-dense);
  line-height: var(--aizy-leading-dense);
  font-weight: var(--aizy-weight-emphasis);
  white-space: nowrap;
}
.a27 .a27-tag .a27-icon { font-size: var(--a27-icon-xs); }
.a27 .a27-tag--info { border-color: var(--aizy-info-border); background: var(--aizy-info-bg); color: var(--aizy-info-text); }
.a27 .a27-tag--success { border-color: var(--aizy-success-border); background: var(--aizy-success-bg); color: var(--aizy-success-text); }
.a27 .a27-tag--warning { border-color: var(--aizy-warning-border); background: var(--aizy-warning-bg); color: var(--aizy-warning-text); }
.a27 .a27-tag--danger { border-color: var(--aizy-danger-border); background: var(--aizy-danger-bg); color: var(--aizy-danger-text); }
.a27 .a27-tag--highlight { border-color: var(--aizy-highlight-border); background: var(--aizy-highlight); color: var(--aizy-highlight-text); }
.a27 .a27-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--aizy-space-12);
  padding: var(--aizy-space-12) var(--aizy-space-16);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-bg);
  color: var(--aizy-text);
}
.a27 .a27-notice > .a27-icon { color: var(--aizy-text-muted); }
.a27 .a27-notice__body { display: flex; flex-direction: column; gap: var(--aizy-space-4); min-width: 0; }
.a27 .a27-notice__title { font-weight: var(--aizy-weight-title); }
.a27 .a27-notice--info { border-color: var(--aizy-info-border); background: var(--aizy-info-bg); color: var(--aizy-info-text); }
.a27 .a27-notice--success { border-color: var(--aizy-success-border); background: var(--aizy-success-bg); color: var(--aizy-success-text); }
.a27 .a27-notice--warning { border-color: var(--aizy-warning-border); background: var(--aizy-warning-bg); color: var(--aizy-warning-text); }
.a27 .a27-notice--danger { border-color: var(--aizy-danger-border); background: var(--aizy-danger-bg); color: var(--aizy-danger-text); }
.a27 .a27-notice--info > .a27-icon,
.a27 .a27-notice--success > .a27-icon,
.a27 .a27-notice--warning > .a27-icon,
.a27 .a27-notice--danger > .a27-icon { color: inherit; }
.a27 .a27-progress {
  display: block;
  width: 100%;
  height: var(--a27-progress-h);
  overflow: hidden;
  border: 0;
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-border);
  color: var(--aizy-action);
  appearance: none;
}
.a27 .a27-progress::-webkit-progress-bar { border-radius: var(--aizy-radius-pill); background: var(--aizy-border); }
.a27 .a27-progress::-webkit-progress-value { border-radius: var(--aizy-radius-pill); background: var(--aizy-action); }
.a27 .a27-progress::-moz-progress-bar { border-radius: var(--aizy-radius-pill); background: var(--aizy-action); }
.a27 .a27-progress--success::-webkit-progress-value { background: var(--aizy-success); }
.a27 .a27-progress--success::-moz-progress-bar { background: var(--aizy-success); }
.a27 .a27-progress--warning::-webkit-progress-value { background: var(--aizy-warning); }
.a27 .a27-progress--warning::-moz-progress-bar { background: var(--aizy-warning); }
.a27 .a27-empty { display: flex; flex-direction: column; align-items: center; gap: var(--aizy-space-8); padding: var(--aizy-space-32) var(--aizy-space-20); color: var(--aizy-text-muted); text-align: center; }
/* Indicador en línea: el icono gira (duración --a27-spin); con prefers-reduced-motion se queda quieto y la etiqueta sigue diciendo qué pasa. */
.a27 .a27-spinner { display: inline-flex; align-items: center; gap: var(--aizy-space-8); color: var(--aizy-text-muted); }
.a27 .a27-spinner .a27-icon { animation: a27-spin var(--a27-spin) linear infinite; }
@keyframes a27-spin { to { transform: rotate(var(--a27-turn)); } }

/* 10. Datos ------------------------------------------------------------- */
.a27 .a27-table-wrap { max-height: var(--a27-list-h); overflow: auto; }
.a27 .a27-table { width: 100%; border-collapse: collapse; }
.a27 .a27-table th {
  padding: var(--aizy-space-8) var(--aizy-space-16);
  border-bottom: var(--a27-hairline) solid var(--aizy-border);
  background: var(--aizy-bg);
  color: var(--aizy-text-muted);
  font-size: var(--aizy-size-dense);
  line-height: var(--aizy-leading-dense);
  font-weight: var(--aizy-weight-emphasis);
  text-align: left;
  white-space: nowrap;
}
/* Cabecera fija al hacer scroll dentro de a27-table-wrap (alto máximo --a27-list-h). */
.a27 .a27-table-wrap .a27-table th { position: sticky; top: 0; z-index: 1; }
.a27 .a27-table td { padding: var(--aizy-space-12) var(--aizy-space-16); border-bottom: var(--a27-hairline) solid var(--aizy-border); vertical-align: middle; }
.a27 .a27-table tbody tr:last-child td { border-bottom: 0; }
.a27 .a27-table th:first-child,
.a27 .a27-table td:first-child { padding-left: var(--aizy-space-20); }
.a27 .a27-table th:last-child,
.a27 .a27-table td:last-child { padding-right: var(--aizy-space-20); }
.a27 .a27-table .a27-cell-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a27 .a27-table .a27-cell-actions { text-align: right; white-space: nowrap; }
.a27 .a27-table .a27-cell-actions .a27-actions { justify-content: flex-end; flex-wrap: nowrap; }
/* Tabla con scroll (sin --cards): la columna de acciones queda fija a la derecha para que sus botones siempre se vean.
   Las celdas fijas llevan el fondo de su fila; la cabecera queda por encima de ellas al hacer scroll vertical. */
.a27 .a27-table-wrap .a27-table:not(.a27-table--cards) .a27-cell-actions { position: sticky; right: 0; box-shadow: inset var(--a27-hairline) 0 0 var(--aizy-border); }
.a27 .a27-table-wrap .a27-table:not(.a27-table--cards) th { z-index: 2; }
.a27 .a27-table-wrap .a27-table:not(.a27-table--cards) th.a27-cell-actions { z-index: 3; }
.a27 .a27-table-wrap .a27-table:not(.a27-table--cards) td.a27-cell-actions { z-index: 1; background: var(--aizy-surface); }
.a27 .a27-table-wrap .a27-table:not(.a27-table--cards) .a27-row--selected > td.a27-cell-actions { background: var(--aizy-action-tint); }
.a27 .a27-table-wrap .a27-table:not(.a27-table--cards) .a27-row--flag > td.a27-cell-actions { background: var(--aizy-warning-bg); }
.a27 .a27-cell-main { display: flex; flex-direction: column; min-width: 0; }
.a27 .a27-cell-main__title { font-weight: var(--aizy-weight-emphasis); overflow-wrap: anywhere; }
.a27 .a27-cell-main__sub { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); overflow-wrap: anywhere; }
.a27 .a27-table .a27-row-detail td { background: var(--aizy-bg); }
.a27 .a27-kv { display: flex; flex-direction: column; }
.a27 .a27-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aizy-space-12); padding: var(--aizy-space-8) 0; border-top: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-kv__row:first-child { border-top: 0; }
.a27 .a27-kv__key { flex: none; color: var(--aizy-text-muted); }
.a27 .a27-kv__value { min-width: 0; font-weight: var(--aizy-weight-emphasis); text-align: right; overflow-wrap: anywhere; }
.a27 .a27-kv--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--a27-kv-min), 1fr)); gap: var(--aizy-space-16) var(--aizy-space-24); }
.a27 .a27-kv--grid .a27-kv__row { flex-direction: column; gap: var(--aizy-space-4); padding: 0; border-top: 0; }
.a27 .a27-kv--grid .a27-kv__key { font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-kv--grid .a27-kv__value { text-align: left; }
.a27 .a27-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--a27-kpi-min), 1fr)); gap: var(--aizy-space-16); }
.a27 .a27-kpi { display: flex; flex-direction: column; gap: var(--aizy-space-4); min-width: 0; padding: var(--aizy-space-16); border: var(--a27-hairline) solid var(--aizy-border); border-radius: var(--aizy-radius-md); background: var(--aizy-surface); }
.a27 .a27-kpi__label { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-kpi__value { font-size: var(--aizy-size-title); line-height: var(--aizy-leading-title); font-weight: var(--aizy-weight-title); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.a27 .a27-kpi__meta { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-chart { display: flex; flex-direction: column; gap: var(--aizy-space-12); }
.a27 .a27-chart__plot { display: block; width: 100%; height: var(--a27-chart-h); border-bottom: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-chart__grid { stroke: var(--aizy-border); stroke-width: var(--a27-hairline); }
.a27 .a27-chart__series { fill: none; stroke-width: var(--a27-indicator); stroke-linejoin: round; stroke-linecap: round; }
.a27 .a27-chart__series--1 { stroke: var(--aizy-chart-1); }
.a27 .a27-chart__series--2 { stroke: var(--aizy-chart-2); }
.a27 .a27-legend { display: flex; flex-wrap: wrap; gap: var(--aizy-space-16); color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-legend__item { display: inline-flex; align-items: center; gap: var(--aizy-space-8); }
.a27 .a27-legend__item::before { content: ""; width: var(--a27-legend-dot); height: var(--a27-legend-dot); border-radius: var(--aizy-radius-pill); }
.a27 .a27-legend__item--1::before { background: var(--aizy-chart-1); }
.a27 .a27-legend__item--2::before { background: var(--aizy-chart-2); }
.a27 .a27-log {
  max-height: var(--a27-log-h);
  overflow: auto;
  padding: var(--aizy-space-12);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-sm);
  background: var(--aizy-bg);
  font-family: var(--aizy-font-mono);
  font-size: var(--aizy-size-dense);
  line-height: var(--aizy-leading-dense);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.a27 .a27-list { display: flex; flex-direction: column; max-height: var(--a27-list-h); overflow-y: auto; }
.a27 .a27-list__item + .a27-list__item { border-top: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aizy-space-12);
  min-height: var(--a27-list-row-h);
  padding: var(--aizy-space-12) var(--aizy-space-20);
  list-style: none;
}
.a27 summary.a27-list__row { cursor: pointer; }
.a27 summary.a27-list__row::-webkit-details-marker { display: none; }
.a27 .a27-list__item[open] > .a27-list__row { background: var(--aizy-bg); }
.a27 .a27-list__item[aria-current="true"] > .a27-list__row { background: var(--aizy-action-tint); }
.a27 .a27-list__main { display: flex; flex-direction: column; gap: var(--aizy-space-4); min-width: 0; }
.a27 .a27-list__title { font-weight: var(--aizy-weight-emphasis); overflow-wrap: anywhere; }
.a27 .a27-list__meta { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); overflow-wrap: anywhere; }
/* Meta con pastillas: fila que se ajusta, con hueco entre ellas; con identidad (avatar y nombre), bajo el nombre y no bajo el avatar (KAN-485). */
.a27 .a27-list__meta:has(> .a27-tag) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-4); }
.a27 .a27-list__title:has(> .a27-identity) + .a27-list__meta { margin-top: var(--aizy-space-4); padding-left: calc(var(--a27-avatar-md) + var(--aizy-space-12)); }
.a27 .a27-list__aside { display: flex; flex: none; align-items: center; gap: var(--aizy-space-8); }
.a27 .a27-list__detail { display: flex; flex-direction: column; gap: var(--aizy-space-12); padding: var(--aizy-space-4) var(--aizy-space-20) var(--aizy-space-16); }

/* 10b. Vista previa: marco con título y enlace «Abrir» para un iframe; la altura la fija el modificador. */
.a27 .a27-preview-frame { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: var(--a27-hairline) solid var(--aizy-border); border-radius: var(--aizy-radius-md); background: var(--aizy-surface); }
.a27 .a27-preview-frame__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aizy-space-12); padding: var(--aizy-space-8) var(--aizy-space-12); border-bottom: var(--a27-hairline) solid var(--aizy-border); background: var(--aizy-bg); }
.a27 .a27-preview-frame__title { min-width: 0; font-weight: var(--aizy-weight-emphasis); overflow-wrap: anywhere; }
.a27 .a27-preview-frame__aside { display: flex; flex: none; align-items: center; gap: var(--aizy-space-8); }
.a27 .a27-preview-frame__iframe { display: block; width: 100%; height: var(--a27-preview-h-inline); border: 0; background: var(--aizy-surface); }
.a27 .a27-preview-frame--inline .a27-preview-frame__iframe { height: var(--a27-preview-h-inline); }
.a27 .a27-preview-frame--floating .a27-preview-frame__iframe { height: var(--a27-preview-h-floating); }

/* 11. Acceso ------------------------------------------------------------ */
.a27 .a27-auth,
.a27.a27-auth {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--a27-viewport-h);
  padding: var(--aizy-space-24);
  background: var(--aizy-bg);
  container-type: inline-size;
  container-name: a27;
}
.a27 .a27-auth__corner { position: absolute; top: var(--aizy-space-16); right: var(--aizy-space-16); }
.a27 .a27-auth__card {
  display: flex;
  flex-direction: column;
  gap: var(--aizy-space-20);
  width: 100%;
  max-width: var(--a27-auth-w);
  padding: var(--aizy-space-32);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-lg);
  background: var(--aizy-surface);
  box-shadow: var(--aizy-shadow-2);
}
.a27 .a27-auth__head { display: flex; flex-direction: column; gap: var(--aizy-space-8); }
.a27 .a27-auth__title { font-size: var(--aizy-size-title); line-height: var(--aizy-leading-title); font-weight: var(--aizy-weight-title); }
.a27 .a27-auth__sub { color: var(--aizy-text-muted); }
.a27 .a27-auth__actions { display: flex; flex-direction: column; gap: var(--aizy-space-8); }
.a27 .a27-auth__actions .a27-btn { width: 100%; }
.a27 .a27-steps { display: flex; flex-direction: column; gap: var(--aizy-space-12); counter-reset: a27-step; }
.a27 .a27-step { display: flex; align-items: flex-start; gap: var(--aizy-space-12); }
.a27 .a27-step::before {
  content: counter(a27-step);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--a27-step);
  height: var(--a27-step);
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-action-tint);
  color: var(--aizy-action-hover);
  font-size: var(--aizy-size-dense);
  font-weight: var(--aizy-weight-title);
  counter-increment: a27-step;
}
.a27 .a27-step__text { display: flex; flex-direction: column; gap: var(--aizy-space-4); }
.a27 .a27-step__title { font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-step__note { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
.a27 .a27-qr {
  display: grid;
  place-items: center;
  width: var(--a27-qr);
  height: var(--a27-qr);
  padding: var(--aizy-space-8);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-sm);
  background: var(--aizy-surface);
  color: var(--aizy-text-muted);
}

/* 12. Ayuda ------------------------------------------------------------- */
.a27 .a27-tooltip { position: relative; }
.a27 .a27-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + var(--a27-tooltip-gap));
  right: 0;
  z-index: 10;
  padding: var(--aizy-space-4) var(--aizy-space-8);
  border-radius: var(--aizy-radius-sm);
  background: var(--aizy-text);
  color: var(--aizy-surface);
  font-size: var(--aizy-size-micro);
  line-height: var(--aizy-leading-micro);
  font-weight: var(--aizy-weight-emphasis);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--a27-motion);
}
.a27 .a27-tooltip:focus-visible::after { opacity: 1; }
@media (hover: hover) { .a27 .a27-tooltip:hover::after { opacity: 1; } }
/* Dentro de una tabla con scroll horizontal el tooltip va encima: hacia abajo crearia scroll vertical. */
.a27 .a27-table-wrap .a27-tooltip::after { top: auto; bottom: calc(100% + var(--a27-tooltip-gap)); }
@media (prefers-reduced-motion: reduce) {
  .a27 .a27-nav__group .a27-icon,
  .a27 .a27-sidebar--rail,
  .a27 .a27-sidebar--expanding,
  .a27 .a27-sidebar--rail .a27-brand,
  .a27 .a27-sidebar--expanding .a27-brand,
  .a27 .a27-sidebar--rail ~ .a27-main .a27-content,
  .a27 .a27-sidebar--expanding ~ .a27-main .a27-content,
  .a27 .a27-sidebar--rail .a27-nav__item::after,
  .a27 .a27-tooltip::after,
  .a27 .a27-switch__control,
  .a27 .a27-switch__control::before,
  .a27 .a27-multiselect__trigger > .a27-icon,
  .a27 .a27-actionbar { transition: none; }
  .a27 .a27-spinner .a27-icon { animation: none; }
  .a27 .a27-table__sort .a27-icon,
  .a27 .a27-cell-copy .a27-copy,
  .a27 .a27-flow__step,
  .a27 .a27-flow__toggle > .a27-icon:last-child,
  .a27 .a27-card--collapsible .a27-card__aside [aria-expanded] .a27-icon,
  .a27 .a27-avatar__edit { transition: none; }
}

/* 12b. Capas -------------------------------------------------------------
   Diálogo, espera, aviso y menú. Fijos al viewport (diálogo, toast) o a su
   contenedor posicionado (espera, menú). El velo es el rol --aizy-bg: en día
   aclara el fondo y en noche lo oscurece, sin regla de noche. */
.a27 .a27-dialog__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--a27-z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--aizy-space-24);
  background: color-mix(in srgb, var(--aizy-bg) var(--a27-scrim), transparent);
}
/* El fondo existe solo mientras su diálogo está abierto (<dialog open>): un único estado. */
.a27 .a27-dialog__backdrop:not(:has(> .a27-dialog[open])) { display: none; }
.a27 .a27-dialog {
  position: static;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--a27-dialog-w);
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-lg);
  background: var(--aizy-surface-raised);
  color: var(--aizy-text);
  box-shadow: var(--aizy-shadow-3);
}
.a27 .a27-dialog:not([open]) { display: none; }
/* En producto se abre con showModal() (foco atrapado, fondo inerte y Esc nativos): en la capa superior
   el diálogo se centra solo y el ::backdrop nativo queda transparente; el velo lo sigue pintando __backdrop. */
.a27 .a27-dialog:modal { position: fixed; inset: 0; width: calc(100% - 2 * var(--aizy-space-24)); height: fit-content; max-height: calc(100% - 2 * var(--aizy-space-24)); margin: auto; }
.a27 .a27-dialog::backdrop { background: transparent; }
.a27 .a27-dialog--sm { max-width: var(--a27-dialog-w-sm); }
.a27 .a27-dialog--form { max-width: var(--a27-dialog-w-lg); }
/* Confirmación con tres acciones (cambios sin guardar): el ancho de form para que quepan en una fila (KAN-484). */
.a27 .a27-dialog--wide { max-width: var(--a27-dialog-w-lg); }
.a27 .a27-dialog--danger { border-color: var(--aizy-danger-border); }
.a27 .a27-dialog--danger .a27-dialog__title .a27-icon { color: var(--aizy-danger-text); }
.a27 .a27-dialog--warning .a27-dialog__title .a27-icon { color: var(--aizy-warning-text); }
.a27 .a27-dialog__head { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: var(--aizy-space-12); padding: var(--aizy-space-16) var(--aizy-space-20); }
.a27 .a27-dialog__heading { display: flex; flex-direction: column; gap: var(--aizy-space-4); min-width: 0; }
.a27 .a27-dialog__title { display: flex; align-items: center; gap: var(--aizy-space-8); font-size: var(--aizy-size-title-sm); line-height: var(--aizy-leading-title-sm); font-weight: var(--aizy-weight-title); }
.a27 .a27-dialog__title .a27-icon { color: var(--aizy-text-muted); }
.a27 .a27-dialog__sub { color: var(--aizy-text-muted); }
.a27 .a27-dialog__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--aizy-space-16); min-height: 0; padding: 0 var(--aizy-space-20) var(--aizy-space-20); overflow-y: auto; }
.a27 .a27-dialog__actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aizy-space-8); padding: var(--aizy-space-12) var(--aizy-space-20); border-top: var(--a27-hairline) solid var(--aizy-border); }
/* Confirmación de tres acciones: cancelar a la izquierda; secundaria y primaria a la derecha. */
.a27 .a27-dialog--confirm .a27-dialog__actions > :first-child { margin-right: auto; }

.a27 .a27-busy-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--a27-z-busy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--aizy-space-16);
  background: color-mix(in srgb, var(--aizy-bg) var(--a27-scrim), transparent);
}
.a27 .a27-busy-overlay__card { display: flex; align-items: center; padding: var(--aizy-space-16) var(--aizy-space-20); border: var(--a27-hairline) solid var(--aizy-border); border-radius: var(--aizy-radius-md); background: var(--aizy-surface-raised); box-shadow: var(--aizy-shadow-2); }

.a27 .a27-toast__stack {
  position: fixed;
  right: var(--aizy-space-24);
  bottom: var(--aizy-space-24);
  z-index: var(--a27-z-toast);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--aizy-space-8);
  width: var(--a27-toast-w);
  pointer-events: none;
}
.a27 .a27-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--aizy-space-12);
  padding: var(--aizy-space-12) var(--aizy-space-16);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface-raised);
  color: var(--aizy-text);
  box-shadow: var(--aizy-shadow-2);
  pointer-events: auto;
}
.a27 .a27-toast__text { min-width: 0; font-weight: var(--aizy-weight-emphasis); overflow-wrap: anywhere; }
.a27 .a27-toast--info { border-color: var(--aizy-info-border); background: var(--aizy-info-bg); color: var(--aizy-info-text); }
.a27 .a27-toast--success { border-color: var(--aizy-success-border); background: var(--aizy-success-bg); color: var(--aizy-success-text); }
.a27 .a27-toast--danger { border-color: var(--aizy-danger-border); background: var(--aizy-danger-bg); color: var(--aizy-danger-text); }

.a27 .a27-menu { position: relative; display: inline-block; }
.a27 .a27-menu > .a27-btn[aria-expanded="true"] { background: var(--aizy-bg); }
.a27 .a27-menu__popup {
  position: absolute;
  top: calc(100% + var(--a27-tooltip-gap));
  left: 0;
  z-index: var(--a27-z-menu);
  display: flex;
  flex-direction: column;
  width: var(--a27-menu-w);
  max-height: var(--a27-menu-h);
  padding: var(--aizy-space-8);
  overflow-y: auto;
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface-raised);
  box-shadow: var(--aizy-shadow-3);
}
.a27 .a27-menu__group { display: flex; flex-direction: column; gap: var(--aizy-space-4); }
.a27 .a27-menu__group + .a27-menu__group { margin-top: var(--aizy-space-8); padding-top: var(--aizy-space-8); border-top: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-menu__title {
  padding: var(--aizy-space-4) var(--aizy-space-12);
  color: var(--aizy-text-muted);
  font-size: var(--aizy-size-micro);
  line-height: var(--aizy-leading-micro);
  font-weight: var(--aizy-weight-title);
  letter-spacing: var(--a27-tracking-caps);
  text-transform: uppercase;
}
.a27 .a27-menu__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--aizy-space-12);
  width: 100%;
  padding: var(--aizy-space-8) var(--aizy-space-12);
  border: 0;
  border-radius: var(--aizy-radius-sm);
  background: transparent;
  color: var(--aizy-text);
  text-align: left;
  cursor: pointer;
}
.a27 .a27-menu__item:hover { background: var(--aizy-bg); }
.a27 .a27-menu__item > .a27-icon { grid-row: 1 / span 2; color: var(--aizy-text-muted); }
.a27 .a27-menu__name { font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-menu__desc { grid-column: 2; color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }

/* Solo documentación y lienzo: contiene las capas fijas (diálogo, toast) para mostrarlas dentro de la página. */
.a27 .a27-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--aizy-space-12);
  min-height: var(--a27-stage-h);
  padding: var(--aizy-space-16);
  border: var(--a27-hairline) dashed var(--aizy-border-field);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-bg);
  contain: layout paint;
}

/* 12d. Shell de Knowledge Admin (KAN-418) ---------------------------------
   Barra superior del Admin (__start y __tools en lugar de la miga), franja de
   impersonación sobre la barra, pastilla de feature en el lateral y toasts
   por encima de la barra de guardado. Solo reglas del shell; el resto de la
   anatomía es la de los objetos existentes. */
.a27 .a27-topbar__start { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-8); min-width: 0; }
.a27 .a27-topbar__tools { display: flex; flex: none; align-items: center; gap: var(--aizy-space-8); }
/* Selector de bot: pequeño y de ancho automático junto a los accesos. */
.a27 .a27-topbar__start .a27-select { width: auto; max-width: var(--a27-bot-select-w); min-height: var(--a27-control-h-sm); font-size: var(--aizy-size-dense); }
/* Franja de impersonación: aviso a ancho completo sobre la barra superior, con la acción a la derecha. */
.a27 .a27-main > .a27-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--aizy-space-8) var(--aizy-space-24);
  border-width: 0 0 var(--a27-hairline);
  border-radius: 0;
}
/* Sección condicionada por un feature (solo lienzo): la pastilla va al final del ítem. */
.a27 .a27-nav__item .a27-tag { margin-left: auto; }
/* La barra de guardado visible pasa delante de los toasts: se elevan sobre ella. */
.a27 .a27-actionbar:not([hidden]) ~ .a27-toast__stack { bottom: calc(var(--a27-actionbar-h) + var(--aizy-space-16)); }
/* Columna principal estrecha (lateral + contenido por debajo de ~1180 px): las utilidades bajan a su propia fila, a la derecha. */
@container a27 (max-width: 1180px) {
  .a27 .a27-topbar:has(> .a27-topbar__start) { flex-wrap: wrap; padding-top: var(--aizy-space-8); padding-bottom: var(--aizy-space-8); }
  .a27 .a27-topbar__tools { margin-left: auto; }
}
@container a27 (max-width: 760px) {
  .a27 .a27-topbar__start { order: 1; flex: 1 0 100%; }
  .a27 .a27-topbar__tools { flex: 1 1 auto; justify-content: space-between; }
  .a27 .a27-main > .a27-notice { grid-template-columns: auto minmax(0, 1fr); padding: var(--aizy-space-8) var(--aizy-space-16); }
  .a27 .a27-main > .a27-notice > form { grid-column: 2; }
  .a27 .a27-actionbar:not([hidden]) ~ .a27-toast__stack { bottom: calc(var(--a27-actionbar-h-narrow) + var(--a27-safe-bottom) + var(--aizy-space-16)); }
}

/* 12c. Datos, identidad y mensajes (KAN-417) ------------------------------
   Tabla ordenable y editable, copiar, filas de estado, paginación, resumen con total, leyenda
   conmutable, línea de tiempo y flujo; tarjeta plegable, segmentado múltiple, punto y tono de cifras;
   avatar e icono de marca; conversaciones, hilo, compositor, vista previa y adjunto. Los estados
   son atributos (aria-sort, aria-pressed, aria-expanded, aria-current, hidden, disabled). */
.a27 .a27-textarea:disabled { background: var(--aizy-bg); color: var(--aizy-text-muted); }

/* Tabla ordenable: la dirección la dice aria-sort en el th; la flecha apunta arriba y gira si es descendente. */
.a27 .a27-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--aizy-space-4);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.a27 .a27-table__sort:hover { color: var(--aizy-text); }
.a27 .a27-table__sort .a27-icon { font-size: var(--a27-icon-sm); opacity: var(--a27-sort-idle); transition: transform var(--a27-motion); }
.a27 th[aria-sort="ascending"] .a27-table__sort,
.a27 th[aria-sort="descending"] .a27-table__sort { color: var(--aizy-text); }
.a27 th[aria-sort="ascending"] .a27-table__sort .a27-icon,
.a27 th[aria-sort="descending"] .a27-table__sort .a27-icon { opacity: 1; }
.a27 th[aria-sort="descending"] .a27-table__sort .a27-icon { transform: rotate(var(--a27-flip)); }

/* Tabla editable: controles de 32 px en las celdas (con un ancho mínimo: en estrecho la tabla desplaza dentro de su a27-table-wrap) y fila vacía. */
.a27 .a27-table--editable td { padding-top: var(--aizy-space-8); padding-bottom: var(--aizy-space-8); }
.a27 .a27-table--editable .a27-input,
.a27 .a27-table--editable .a27-select { min-height: var(--a27-control-h-sm); }
.a27 .a27-table--editable td > .a27-input,
.a27 .a27-table--editable td > .a27-select { min-width: var(--a27-cell-input-min); }
.a27 .a27-table .a27-cell-empty { padding: var(--aizy-space-24) var(--aizy-space-20); color: var(--aizy-text-muted); text-align: center; }

/* Valor copiable: el botón aparece al pasar el ratón o con foco; con puntero táctil o en estrecho siempre se ve. */
.a27 .a27-cell-copy { display: inline-flex; align-items: center; gap: var(--aizy-space-4); min-width: 0; overflow-wrap: anywhere; }
.a27 .a27-copy { flex: none; }
@media (hover: hover) {
  .a27 .a27-cell-copy .a27-copy { opacity: 0; transition: opacity var(--a27-motion); }
  .a27 .a27-cell-copy:hover .a27-copy,
  .a27 .a27-cell-copy:focus-within .a27-copy { opacity: 1; }
}

/* Filas seleccionada y marcada: tinte de la fila y línea en el borde izquierdo. */
.a27 .a27-row--selected { background: var(--aizy-action-tint); }
.a27 .a27-row--flag { background: var(--aizy-warning-bg); }
.a27 .a27-row--selected > :first-child { box-shadow: inset var(--a27-indicator) 0 0 var(--aizy-action); }
.a27 .a27-row--flag > :first-child { box-shadow: inset var(--a27-indicator) 0 0 var(--aizy-warning); }

/* Paginación. */
.a27 .a27-pager { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--aizy-space-12); }
.a27 .a27-pager .a27-select { width: auto; min-height: var(--a27-control-h-sm); }
.a27 .a27-pager .a27-actions { margin-left: auto; }
.a27 .a27-pager--more { justify-content: center; }

/* Resumen con total. */
.a27 .a27-kv__row--total { padding-top: var(--aizy-space-12); border-top: var(--a27-indicator) solid var(--aizy-border); }
.a27 .a27-kv__row--total .a27-kv__key { color: var(--aizy-text); font-weight: var(--aizy-weight-title); }
.a27 .a27-kv__row--total .a27-kv__value { font-size: var(--aizy-size-title-sm); line-height: var(--aizy-leading-title-sm); font-weight: var(--aizy-weight-title); font-variant-numeric: tabular-nums; }

/* Leyenda conmutable y muestras de serie (--a27-series-N de la raíz). */
.a27 .a27-swatch {
  display: inline-block;
  flex: none;
  width: var(--a27-legend-dot);
  height: var(--a27-legend-dot);
  border: var(--a27-indicator) solid var(--a27-swatch);
  border-radius: var(--aizy-radius-pill);
  background: var(--a27-swatch);
}
.a27 .a27-swatch--1 { --a27-swatch: var(--a27-series-1); }
.a27 .a27-swatch--2 { --a27-swatch: var(--a27-series-2); }
.a27 .a27-swatch--3 { --a27-swatch: var(--a27-series-3); }
.a27 .a27-swatch--4 { --a27-swatch: var(--a27-series-4); }
.a27 .a27-swatch--5 { --a27-swatch: var(--a27-series-5); }
.a27 .a27-swatch--6 { --a27-swatch: var(--a27-series-6); }
.a27 .a27-swatch--7 { --a27-swatch: var(--a27-series-7); }
.a27 .a27-swatch--8 { --a27-swatch: var(--a27-series-8); }
.a27 .a27-legend__item--toggle {
  padding: var(--aizy-space-4) var(--aizy-space-8);
  border: var(--a27-hairline) solid transparent;
  border-radius: var(--aizy-radius-sm);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.a27 .a27-legend__item--toggle::before { content: none; }
.a27 .a27-legend__item--toggle:hover { background: var(--aizy-bg); color: var(--aizy-text); }
.a27 .a27-legend__item--toggle[aria-pressed="true"] { color: var(--aizy-text); }
.a27 .a27-legend__item--toggle[aria-pressed="false"] { text-decoration: line-through; }
.a27 .a27-legend__item--toggle[aria-pressed="false"] .a27-swatch { background: transparent; }

/* Línea de tiempo: punto y línea por ítem; el lado cambia el borde, la fase el relleno o el halo. */
.a27 .a27-timeline { display: flex; flex-direction: column; }
.a27 .a27-timeline__item {
  --a27-timeline-edge: var(--aizy-border-field);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--aizy-space-4);
  padding: 0 0 var(--aizy-space-20) calc(var(--a27-timeline-dot) + var(--aizy-space-12));
}
.a27 .a27-timeline__item:last-child { padding-bottom: 0; }
.a27 .a27-timeline__item::before {
  content: "";
  position: absolute;
  top: calc((var(--aizy-size-dense) * var(--aizy-leading-dense) - var(--a27-timeline-dot)) / 2);
  left: 0;
  width: var(--a27-timeline-dot);
  height: var(--a27-timeline-dot);
  border: var(--a27-indicator) solid var(--a27-timeline-edge);
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-surface);
}
.a27 .a27-timeline__item::after {
  content: "";
  position: absolute;
  top: calc((var(--aizy-size-dense) * var(--aizy-leading-dense) + var(--a27-timeline-dot)) / 2);
  bottom: 0;
  left: calc(var(--a27-timeline-dot) / 2);
  width: var(--a27-hairline);
  background: var(--aizy-border);
  transform: translateX(-50%);
}
.a27 .a27-timeline__item:last-child::after { content: none; }
.a27 .a27-timeline__item--visitor { --a27-timeline-edge: var(--aizy-border-field); }
.a27 .a27-timeline__item--bot { --a27-timeline-edge: var(--aizy-highlight-text); }
.a27 .a27-timeline__item--milestone { --a27-timeline-edge: var(--aizy-action); }
.a27 .a27-timeline__item--open::before { box-shadow: 0 0 0 var(--aizy-space-4) var(--aizy-info-border); }
.a27 .a27-timeline__item--sent::before { background: var(--a27-timeline-edge); }
.a27 .a27-timeline__time { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); font-variant-numeric: tabular-nums; }
.a27 .a27-timeline__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--aizy-space-4); min-width: 0; }
.a27 .a27-timeline__quote { margin: 0; padding-left: var(--aizy-space-12); border-left: var(--a27-indicator) solid var(--aizy-border); overflow-wrap: anywhere; }
.a27 .a27-timeline__item--bot .a27-timeline__quote { border-left-color: var(--aizy-highlight-border); }
/* Variante conversación (KAN-489, Lead Tracking): eje central; el visitante a la izquierda y el bot a la derecha, en burbujas;
   los hitos, centrados sobre el eje. Cada ítem pinta su tramo del eje y el color lo da la fase: --open, aviso (sigue abierto);
   --sent, éxito (enviado). En estrecho (§13) vuelve a la columna única del objeto base. */
.a27 .a27-timeline--conversation .a27-timeline__item {
  --a27-timeline-axis: var(--aizy-warning);
  --a27-timeline-edge: var(--a27-timeline-axis);
  isolation: isolate;
  align-items: flex-start;
  padding: 0 0 var(--aizy-space-16) calc(50% + var(--a27-timeline-gap));
}
.a27 .a27-timeline--conversation .a27-timeline__item--sent { --a27-timeline-axis: var(--aizy-success); }
.a27 .a27-timeline--conversation .a27-timeline__item::before { z-index: 1; left: 50%; transform: translateX(-50%); }
.a27 .a27-timeline--conversation .a27-timeline__item::after { top: 0; bottom: 0; left: 50%; width: var(--a27-indicator); background: var(--a27-timeline-axis); }
.a27 .a27-timeline--conversation .a27-timeline__item:last-child::after { content: ""; bottom: auto; height: calc((var(--aizy-size-dense) * var(--aizy-leading-dense)) / 2); }
/* El lado derecho es el de base (bot); el visitante pasa a la izquierda y su hora y su burbuja se pegan al eje. */
.a27 .a27-timeline--conversation .a27-timeline__item--visitor { align-items: flex-end; padding: 0 calc(50% + var(--a27-timeline-gap)) var(--aizy-space-16) 0; }
.a27 .a27-timeline--conversation .a27-timeline__item--visitor .a27-timeline__body,
.a27 .a27-timeline--conversation .a27-timeline__item--bot .a27-timeline__body {
  padding: var(--aizy-space-8) var(--aizy-space-12);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
}
.a27 .a27-timeline--conversation .a27-timeline__item--bot .a27-timeline__body { border-color: var(--aizy-highlight-border); background: var(--aizy-highlight); }
.a27 .a27-timeline--conversation .a27-timeline__quote { padding-left: 0; border-left: 0; }
.a27 .a27-timeline--conversation .a27-timeline__item--milestone { align-items: center; padding: calc(var(--a27-timeline-dot) + var(--aizy-space-8)) 0 var(--aizy-space-16); text-align: center; }
.a27 .a27-timeline--conversation .a27-timeline__item--milestone .a27-timeline__body { align-items: center; }
.a27 .a27-timeline--conversation .a27-timeline__item--milestone::before { top: 0; }

/* Flujo de pasos: número por contador, conector «+» entre pasos y resaltado del paso nuevo. */
.a27 .a27-flow { display: flex; flex-direction: column; counter-reset: a27-flow; }
.a27 .a27-flow__item { display: flex; flex-direction: column; counter-increment: a27-flow; }
.a27 .a27-flow__step {
  display: flex;
  align-items: center;
  gap: var(--aizy-space-12);
  min-width: 0;
  padding: var(--aizy-space-8) var(--aizy-space-12);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
  transition: background var(--a27-fade), border-color var(--a27-fade);
}
.a27 .a27-flow__step::before {
  content: counter(a27-flow);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--a27-step);
  height: var(--a27-step);
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-action-tint);
  color: var(--aizy-action-hover);
  font-size: var(--aizy-size-dense);
  font-weight: var(--aizy-weight-title);
}
.a27 .a27-flow__step > .a27-icon { color: var(--aizy-text-muted); }
.a27 .a27-flow__title { flex: 1 1 auto; min-width: 0; font-weight: var(--aizy-weight-emphasis); overflow-wrap: anywhere; }
.a27 .a27-flow__step .a27-actions { flex: none; flex-wrap: nowrap; gap: var(--aizy-space-4); }
.a27 .a27-flow__item--new > .a27-flow__step { border-color: var(--aizy-highlight-border); background: var(--aizy-highlight); }
.a27 .a27-flow__add {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--aizy-space-4) 0 var(--aizy-space-4) calc(var(--aizy-space-12) + var(--a27-step) / 2 - var(--a27-icon-btn) / 2);
}
.a27 .a27-flow__add::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--aizy-space-12) + var(--a27-step) / 2);
  width: var(--a27-hairline);
  background: var(--aizy-border);
  transform: translateX(-50%);
}
.a27 .a27-flow__add .a27-icon-btn { position: relative; }
/* Paso plegable (con cuerpo): icono y título son el botón que pliega y despliega su cuerpo, justo debajo y sobre la línea guía. */
.a27 .a27-flow__toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--aizy-space-12);
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.a27 .a27-flow__toggle > .a27-icon { color: var(--aizy-text-muted); }
.a27 .a27-flow__toggle > .a27-icon:last-child { margin-left: auto; transition: transform var(--a27-motion); }
.a27 .a27-flow__toggle[aria-expanded="true"] > .a27-icon:last-child { transform: rotate(var(--a27-disclosure-turn)); }
.a27 .a27-flow__body {
  display: flex;
  flex-direction: column;
  gap: var(--aizy-space-12);
  margin-left: calc(var(--aizy-space-12) + var(--a27-step) / 2);
  padding: var(--aizy-space-16) 0 var(--aizy-space-16) var(--aizy-space-24);
  border-left: var(--a27-hairline) solid var(--aizy-border);
}
.a27 .a27-flow--nested { padding-left: var(--aizy-space-16); border-left: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-flow--nested .a27-flow__step { background: var(--aizy-bg); }

/* Tarjeta plegable: el chevron del botón de despliegue gira con aria-expanded. No recorta: el menú o el selector
   que se abre al pie de su cuerpo sale por debajo de la tarjeta. */
.a27 .a27-card--collapsible { overflow: visible; }
.a27 .a27-card--collapsible .a27-card__head { align-items: center; }
.a27 .a27-card--collapsible .a27-card__aside .a27-switch { align-items: center; padding: 0; }
.a27 .a27-card--collapsible .a27-card__aside [aria-expanded] .a27-icon { transition: transform var(--a27-motion); }
.a27 .a27-card--collapsible .a27-card__aside [aria-expanded="true"] .a27-icon { transform: rotate(var(--a27-disclosure-turn)); }

/* Segmentado múltiple: la opción activa suma una línea inferior. */
.a27 .a27-segmented--multi .a27-segmented__item { gap: var(--aizy-space-8); }
.a27 .a27-segmented--multi .a27-segmented__item[aria-pressed="true"] { box-shadow: inset 0 calc(-1 * var(--a27-indicator)) 0 var(--aizy-action); }

/* Punto de color y tono de las cifras de barra. */
.a27 .a27-dot { display: inline-block; flex: none; width: var(--a27-dot); height: var(--a27-dot); border-radius: var(--aizy-radius-pill); background: var(--aizy-border-field); }
.a27 .a27-dot--danger { background: var(--aizy-danger); }
.a27 .a27-dot--warning { background: var(--aizy-warning); }
.a27 .a27-dot--info { background: var(--aizy-action); }
.a27 .a27-stat--danger .a27-stat__value { color: var(--aizy-danger-text); }
.a27 .a27-stat--warning .a27-stat__value { color: var(--aizy-warning-text); }
.a27 .a27-stat--info .a27-stat__value { color: var(--aizy-info-text); }
.a27 .a27-stat__note { color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }

/* Tooltip hacia la derecha. */
.a27 .a27-tooltip--right::after { top: 50%; right: auto; bottom: auto; left: calc(100% + var(--a27-tooltip-gap)); transform: translateY(-50%); }

/* Logo de un tercero: imagen de marca; en noche el rol --aizy-brand-filter la pasa a blanco (sin regla de noche). */
.a27 .a27-icon--brand { width: var(--a27-icon-brand); height: var(--a27-icon-brand); object-fit: contain; filter: var(--aizy-brand-filter); }
.a27 .a27-icon--brand.a27-icon--sm { width: var(--a27-icon-brand-sm); height: var(--a27-icon-brand-sm); }
/* Logo de marca a todo color (la «G» de Google): no se tiñe de blanco de noche. */
.a27 .a27-icon--brand-color { filter: none; }

/* Avatar, reserva y variante editable (el input file real va dentro, en a27-sr). */
.a27 .a27-avatar {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--a27-avatar-md);
  height: var(--a27-avatar-md);
  overflow: hidden;
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-action-tint);
  color: var(--aizy-action-hover);
  font-size: var(--aizy-size-body-sm);
  line-height: 1;
  font-weight: var(--aizy-weight-title);
}
.a27 .a27-avatar:has(> .a27-avatar__img) { background: var(--aizy-surface); }
.a27 .a27-avatar--sm { width: var(--a27-avatar-sm); height: var(--a27-avatar-sm); font-size: var(--aizy-size-micro); }
.a27 .a27-avatar--md { width: var(--a27-avatar-md); height: var(--a27-avatar-md); }
.a27 .a27-avatar--lg { width: var(--a27-avatar-lg); height: var(--a27-avatar-lg); font-size: var(--aizy-size-title-sm); }
.a27 .a27-avatar--square { border-radius: var(--aizy-radius-md); }
.a27 .a27-avatar--sm.a27-avatar--square { border-radius: var(--aizy-radius-sm); }
.a27 .a27-avatar > .a27-icon { font-size: var(--a27-icon); }
.a27 .a27-avatar--sm > .a27-icon { font-size: var(--a27-icon-xs); }
.a27 .a27-avatar--lg > .a27-icon { font-size: var(--a27-icon-lg); }
.a27 .a27-avatar__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a27 .a27-avatar--square .a27-avatar__img { object-fit: contain; }
.a27 .a27-avatar--editable { cursor: pointer; }
.a27 .a27-avatar--editable:has(:focus-visible) { outline: var(--a27-indicator) solid var(--aizy-focus); outline-offset: var(--a27-focus-offset); box-shadow: var(--aizy-focus-ring); }
.a27 .a27-avatar__edit {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--aizy-text) var(--a27-overlay), transparent);
  color: var(--aizy-surface);
  font-size: var(--aizy-size-micro);
  line-height: var(--aizy-leading-micro);
  font-weight: var(--aizy-weight-emphasis);
  opacity: 0;
  transition: opacity var(--a27-motion);
}
.a27 .a27-avatar--editable:hover .a27-avatar__edit,
.a27 .a27-avatar--editable:has(:focus-visible) .a27-avatar__edit { opacity: 1; }
@media (hover: none) {
  .a27 .a27-avatar__edit { top: auto; flex-direction: row; gap: var(--aizy-space-4); padding: var(--aizy-space-4) 0; opacity: 1; }
}
.a27 .a27-identity { display: flex; align-items: center; gap: var(--aizy-space-12); min-width: 0; }

/* Lista de conversaciones: cada fila es un enlace; la activa lleva aria-current. */
.a27 .a27-convlist { display: flex; flex-direction: column; }
.a27 .a27-convlist > li + li { border-top: var(--a27-hairline) solid var(--aizy-border); }
.a27 .a27-convlist__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title time" "channel badge";
  align-items: center;
  gap: var(--aizy-space-4) var(--aizy-space-12);
  padding: var(--aizy-space-16);
  color: var(--aizy-text);
  text-decoration: none;
}
.a27 .a27-convlist__item:hover { background: var(--aizy-bg); }
.a27 .a27-convlist__item[aria-current="true"] { background: var(--aizy-action-tint); }
.a27 .a27-convlist__item:focus-visible { outline-offset: calc(-1 * var(--a27-indicator)); }
.a27 .a27-convlist__title { grid-area: title; min-width: 0; overflow: hidden; font-weight: var(--aizy-weight-emphasis); text-overflow: ellipsis; white-space: nowrap; }
.a27 .a27-convlist__time { grid-area: time; color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); white-space: nowrap; }
.a27 .a27-convlist__channel { grid-area: channel; display: inline-flex; align-items: center; gap: var(--aizy-space-4); min-width: 0; color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); }
/* El icono del canal (globo de la web) mide como el logo de marca, para que todas las filas tengan la misma altura. */
.a27 .a27-convlist__channel .a27-icon { font-size: var(--a27-icon-brand-sm); }
.a27 .a27-convlist__badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-width: var(--a27-badge);
  height: var(--a27-badge);
  padding: 0 var(--aizy-space-4);
  border-radius: var(--aizy-radius-pill);
  background: var(--aizy-action);
  color: var(--aizy-on-action);
  font-size: var(--aizy-size-dense);
  font-weight: var(--aizy-weight-title);
  font-variant-numeric: tabular-nums;
}

/* Hilo y burbujas: los mensajes se pegan abajo mientras caben; el cuerpo es siempre texto (pre-wrap). */
.a27 .a27-thread {
  display: flex;
  flex-direction: column;
  gap: var(--aizy-space-12);
  max-height: var(--a27-thread-h);
  padding: var(--aizy-space-16);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.a27 .a27-thread > .a27-bubble:first-of-type { margin-top: auto; }
.a27 .a27-thread > .a27-empty { margin: auto; }
.a27 .a27-workspace__main .a27-thread { flex: 1 1 0; max-height: none; }
.a27 .a27-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--aizy-space-4);
  max-width: var(--a27-bubble-max);
  padding: var(--aizy-space-8) var(--aizy-space-12);
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--aizy-radius-md);
  background: var(--aizy-surface);
}
.a27 .a27-bubble--user { align-self: flex-start; }
.a27 .a27-bubble--agent,
.a27 .a27-bubble--pending { align-self: flex-end; border-color: var(--aizy-info-border); background: var(--aizy-action-tint); }
.a27 .a27-bubble--internal { align-self: stretch; max-width: none; border-style: dashed; border-color: var(--aizy-warning-border); background: var(--aizy-warning-bg); }
.a27 .a27-bubble--pending { border-style: dashed; color: var(--aizy-text-muted); }
.a27 .a27-bubble__meta { display: flex; align-items: center; gap: var(--aizy-space-4); color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); font-weight: var(--aizy-weight-emphasis); }
.a27 .a27-bubble__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.a27 .a27-bubble__link { display: inline-flex; align-items: center; gap: var(--aizy-space-4); align-self: flex-start; font-size: var(--aizy-size-dense); line-height: var(--aizy-leading-dense); font-weight: var(--aizy-weight-emphasis); text-decoration: none; }
.a27 .a27-bubble__link:hover { text-decoration: underline; }

/* Compositor: el textarea crece con el contenido (field-sizing) hasta --a27-composer-max. */
.a27 .a27-composer { display: flex; align-items: flex-end; gap: var(--aizy-space-8); padding: var(--aizy-space-12); border-top: var(--a27-hairline) solid var(--aizy-border); background: var(--aizy-surface); }
.a27 .a27-composer .a27-textarea { flex: 1 1 auto; field-sizing: content; min-height: var(--a27-control-h); max-height: var(--a27-composer-max); padding: var(--aizy-space-8) var(--aizy-space-12); resize: none; }
.a27 .a27-composer__send { align-self: flex-end; width: var(--a27-control-h); height: var(--a27-control-h); border-color: var(--aizy-action); background: var(--aizy-action); color: var(--aizy-on-action); }
.a27 .a27-composer__send:hover { border-color: var(--aizy-action-hover); background: var(--aizy-action-hover); color: var(--aizy-on-action); }
/* Abajo del panel: el tooltip del botón va encima. */
.a27 .a27-composer .a27-tooltip::after { top: auto; bottom: calc(100% + var(--a27-tooltip-gap)); }
.a27 .a27-composer--disabled { background: var(--aizy-bg); }

/* Ventana de chat pública (enlace PWA): ventana enmarcada y centrada con su cabecera, hilo que crece y compositor abajo.
   Superficie de cliente final: la familia de chat (Nunito), cuerpo a 16 px (por debajo, iOS hace zoom al escribir), radio y sombra propios, burbujas con sombra y la
   hora discreta debajo del texto. Perspectiva del visitante: sus burbujas (--user) a la derecha en el color de acción; las del
   bot, a la izquierda. */
.a27 .a27-chat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  width: calc(100% - var(--aizy-space-24) * 2);
  max-width: var(--a27-chat-max);
  min-height: 0;
  margin: var(--aizy-space-24) auto;
  overflow: hidden;
  border: var(--a27-hairline) solid var(--aizy-border);
  border-radius: var(--a27-chat-radius);
  background: var(--aizy-surface);
  box-shadow: var(--aizy-shadow-3);
  font-family: var(--a27-chat-font);
  font-size: var(--a27-chat-text);
  line-height: var(--aizy-leading-body);
}
.a27 .a27-chat .a27-btn,
.a27 .a27-chat .a27-textarea { font-family: inherit; }
.a27 .a27-chat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--aizy-space-8) var(--aizy-space-20);
  padding: var(--aizy-space-16) var(--aizy-space-24);
  border-bottom: var(--a27-hairline) solid var(--aizy-border);
  background: var(--aizy-surface);
}
.a27 .a27-chat__head .a27-avatar { width: var(--a27-chat-avatar); height: var(--a27-chat-avatar); }
.a27 .a27-chat__head .a27-cell-main__title { font-size: var(--aizy-size-title); line-height: var(--aizy-leading-title); font-weight: var(--aizy-weight-title); }
.a27 .a27-chat__head .a27-cell-main__sub { font-size: var(--aizy-size-body-sm); }
.a27 .a27-chat .a27-thread { flex: 1 1 0; max-height: none; gap: var(--aizy-space-16); padding: var(--aizy-space-24); background: var(--aizy-bg); }
.a27 .a27-chat .a27-bubble {
  max-width: var(--a27-chat-bubble-max);
  padding: var(--aizy-space-12) var(--aizy-space-16);
  border-radius: var(--aizy-radius-lg);
  box-shadow: var(--aizy-shadow-1);
}
/* El texto primero y la hora debajo, discreta y sin icono. */
.a27 .a27-chat .a27-bubble__body { order: -1; }
.a27 .a27-chat .a27-bubble__meta { font-size: var(--aizy-size-dense); font-weight: var(--aizy-weight-body); }
.a27 .a27-chat .a27-bubble__meta .a27-icon { display: none; }
.a27 .a27-chat .a27-bubble--user { align-self: flex-end; border-color: var(--aizy-action); background: var(--aizy-action); color: var(--aizy-on-action); }
.a27 .a27-chat .a27-bubble--user .a27-bubble__meta { color: inherit; }
.a27 .a27-chat .a27-bubble--agent,
.a27 .a27-chat .a27-bubble--pending { align-self: flex-start; border-color: var(--aizy-border); background: var(--aizy-surface); }
.a27 .a27-chat .a27-thread > .a27-actions { max-width: var(--a27-chat-bubble-max); }
/* Compositor: tarjeta propia sobre el fondo del hilo, con el campo sin marco y el botón dentro. El anillo de foco lo pinta la tarjeta. */
.a27 .a27-chat .a27-composer {
  flex: none;
  gap: var(--aizy-space-8);
  margin: 0 var(--aizy-space-24) var(--aizy-space-24);
  padding: var(--aizy-space-8);
  border: var(--a27-hairline) solid var(--aizy-border-field);
  border-radius: var(--aizy-radius-lg);
  background: var(--aizy-surface);
  box-shadow: var(--aizy-shadow-2);
}
.a27 .a27-chat:has(> .a27-composer) { background: var(--aizy-bg); }
.a27 .a27-chat .a27-composer:focus-within { outline: var(--a27-indicator) solid var(--aizy-focus); outline-offset: var(--a27-focus-offset); box-shadow: var(--aizy-focus-ring); }
.a27 .a27-chat .a27-composer .a27-textarea { min-height: var(--a27-chat-field-h); padding: var(--aizy-space-16) var(--aizy-space-8); border: 0; background: transparent; font-size: inherit; line-height: inherit; }
.a27 .a27-chat .a27-composer .a27-textarea:focus-visible { outline: 0; box-shadow: none; }
.a27 .a27-chat .a27-composer__send { align-self: center; width: var(--a27-chat-send); height: var(--a27-chat-send); border-radius: var(--aizy-radius-md); }

/* Vista previa de plantilla: burbuja blanca y respuestas rápidas debajo. */
.a27 .a27-message-preview { display: flex; flex-direction: column; gap: var(--aizy-space-8); padding: var(--aizy-space-16); border: var(--a27-hairline) solid var(--aizy-border); border-radius: var(--aizy-radius-md); background: var(--aizy-bg); }
.a27 .a27-message-preview__bubble { display: flex; flex-direction: column; gap: var(--aizy-space-8); width: 100%; max-width: var(--a27-preview-w); padding: var(--aizy-space-8) var(--aizy-space-12); border-radius: var(--aizy-radius-md); background: var(--aizy-surface); box-shadow: var(--aizy-shadow-1); }
.a27 .a27-message-preview__head { font-weight: var(--aizy-weight-title); overflow-wrap: anywhere; }
.a27 .a27-message-preview__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.a27 .a27-message-preview__buttons { display: flex; flex-direction: column; gap: var(--aizy-space-4); width: 100%; max-width: var(--a27-preview-w); }
.a27 .a27-message-preview__button { display: flex; align-items: center; justify-content: center; gap: var(--aizy-space-8); min-height: var(--a27-control-h-sm); padding: 0 var(--aizy-space-12); border-radius: var(--aizy-radius-md); background: var(--aizy-surface); box-shadow: var(--aizy-shadow-1); color: var(--aizy-link); font-weight: var(--aizy-weight-emphasis); overflow-wrap: anywhere; }

/* Adjunto. */
.a27 .a27-attachment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aizy-space-4) var(--aizy-space-8); min-width: 0; }
.a27 .a27-attachment > .a27-icon { color: var(--aizy-text-muted); }
.a27 .a27-attachment a { overflow-wrap: anywhere; }

/* 13. Responsive (container queries sobre .a27-app y .a27-auth) ---------- */
@container a27 (max-width: 1100px) {
  .a27 .a27-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a27 .a27-grid--aside { grid-template-columns: minmax(0, 1fr); }
}
@container a27 (max-width: 760px) {
  .a27 .a27-sidebar { display: none; }
  .a27 .a27-sidebar--open { position: absolute; z-index: 20; top: 0; bottom: 0; left: 0; display: flex; overflow-y: auto; box-shadow: var(--aizy-shadow-3); }
  /* Velo sobre la columna principal mientras el lateral está abierto como capa; un clic en él cierra el menú (JS). */
  .a27 .a27-sidebar--open ~ .a27-main::after { content: ""; position: absolute; inset: 0; z-index: var(--a27-z-raised); background: color-mix(in srgb, var(--aizy-bg) var(--a27-scrim), transparent); }
  .a27 .a27-topbar { flex-wrap: wrap; padding: var(--aizy-space-8) var(--aizy-space-16); }
  .a27 .a27-topbar__brand { margin-right: auto; }
  .a27 .a27-crumb { order: 1; flex: 1 0 100%; flex-wrap: wrap; }
  .a27 .a27-topbar__menu,
  .a27 .a27-topbar__brand { display: inline-flex; }
  .a27 .a27-topbar__user { display: none; }
  .a27 .a27-page-head { padding: var(--aizy-space-16) var(--aizy-space-16) var(--aizy-space-20); }
  .a27 .a27-page-title { display: flex; align-items: center; gap: var(--aizy-space-12); font-size: var(--aizy-size-title); line-height: var(--aizy-leading-title); }
  .a27 .a27-content { padding: var(--aizy-space-16); }
  .a27 .a27-grid--2,
  .a27 .a27-grid--3,
  .a27 .a27-field-grid,
  .a27 .a27-field-grid--3,
  .a27 .a27-lang-field--multi .a27-lang-field__set { grid-template-columns: minmax(0, 1fr); }
  .a27 .a27-card__head { flex-wrap: wrap; }
  .a27 .a27-toolbar__end { margin-left: 0; }
  .a27 .a27-auth__card { padding: var(--aizy-space-24); }
  .a27 .a27-table-wrap,
  .a27 .a27-list { max-height: none; }
  .a27 .a27-table--cards thead { display: none; }
  .a27 .a27-table--cards,
  .a27 .a27-table--cards tbody,
  .a27 .a27-table--cards tr,
  .a27 .a27-table--cards td { display: block; }
  .a27 .a27-table--cards tr { padding: var(--aizy-space-12) var(--aizy-space-16); border-bottom: var(--a27-hairline) solid var(--aizy-border); }
  .a27 .a27-table--cards tbody tr:last-child { border-bottom: 0; }
  .a27 .a27-table--cards td,
  .a27 .a27-table--cards td:first-child,
  .a27 .a27-table--cards td:last-child { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aizy-space-12); padding: var(--aizy-space-4) 0; border-bottom: 0; text-align: right; }
  .a27 .a27-table--cards td::before { content: attr(data-label); flex: none; color: var(--aizy-text-muted); font-size: var(--aizy-size-dense); font-weight: var(--aizy-weight-emphasis); text-align: left; }
  .a27 .a27-table--cards td.a27-cell-primary { padding-bottom: var(--aizy-space-8); text-align: left; }
  .a27 .a27-table--cards td.a27-cell-primary::before { content: none; }
  .a27 .a27-table--cards .a27-cell-actions .a27-actions { justify-content: flex-start; }
  /* Barra de guardado: aviso y botón en filas propias, con la zona segura inferior. */
  .a27 .a27-actionbar { padding: var(--aizy-space-12) var(--aizy-space-16) calc(var(--aizy-space-12) + var(--a27-safe-bottom)); }
  .a27 .a27-actionbar .a27-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
  /* Espacio de trabajo: un solo panel (data-view) y el lateral como capa cuando está abierto. */
  .a27 .a27-workspace { grid-template-columns: minmax(0, 1fr); }
  .a27 .a27-workspace__list,
  .a27 .a27-workspace__main,
  .a27 .a27-workspace__aside { display: none; }
  .a27 .a27-workspace:not([data-view="detail"]) .a27-workspace__list,
  .a27 .a27-workspace[data-view="detail"] .a27-workspace__main { display: flex; }
  .a27 .a27-workspace__list { border-right: 0; }
  .a27 .a27-workspace__aside--open { position: absolute; z-index: var(--a27-z-raised); inset: 0; display: flex; border-left: 0; }
  .a27 .a27-workspace .a27-workspace__back,
  .a27 .a27-workspace .a27-workspace__info { display: inline-flex; }
  /* Capas: acciones del diálogo en columna invertida (el primario, arriba) y avisos a todo el ancho. */
  .a27 .a27-dialog__backdrop { padding: var(--aizy-space-16); }
  .a27 .a27-dialog__actions { flex-direction: column-reverse; align-items: stretch; }
  .a27 .a27-dialog__actions .a27-btn { width: 100%; }
  .a27 .a27-dialog--confirm .a27-dialog__actions > :first-child { margin-right: 0; }
  .a27 .a27-toast__stack { right: var(--aizy-space-16); bottom: calc(var(--aizy-space-16) + var(--a27-safe-bottom)); left: var(--aizy-space-16); width: auto; }
  /* Datos, identidad y mensajes (KAN-417): copiar siempre visible, filas de estado y fila vacía en tarjetas. */
  .a27 .a27-cell-copy .a27-copy { opacity: 1; }
  .a27 .a27-table--cards .a27-row--selected { box-shadow: inset var(--a27-indicator) 0 0 var(--aizy-action); }
  .a27 .a27-table--cards .a27-row--flag { box-shadow: inset var(--a27-indicator) 0 0 var(--aizy-warning); }
  .a27 .a27-table--cards .a27-row--selected > :first-child,
  .a27 .a27-table--cards .a27-row--flag > :first-child { box-shadow: none; }
  .a27 .a27-table--cards td.a27-cell-empty { justify-content: center; text-align: center; }
  .a27 .a27-table--cards td.a27-cell-empty::before { content: none; }
  /* Tamaños táctiles (KAN-489): la raíz .a27 es el body, fuera del contenedor, así que los tokens se reasignan en sus hijos. */
  .a27 .a27-sidebar,
  .a27 .a27-main,
  .a27 .a27-dialog__backdrop,
  .a27 .a27-auth__corner,
  .a27 .a27-auth__card {
    --a27-icon-btn: var(--a27-touch);
    --a27-icon-btn-lg: var(--a27-touch);
    --a27-control-h-sm: var(--a27-touch);
    --a27-switch-w: var(--a27-touch-switch-w);
    --a27-switch-h: var(--a27-touch-switch-h);
    --a27-switch-knob: var(--a27-touch-switch-knob);
    --a27-choice: var(--a27-touch-choice);
  }
  .a27 .a27-table__sort,
  .a27 .a27-choice { min-height: var(--a27-touch); }
  /* Línea de tiempo en conversación: una sola columna con el eje al borde, como el objeto base. */
  .a27 .a27-timeline--conversation .a27-timeline__item,
  .a27 .a27-timeline--conversation .a27-timeline__item--visitor,
  .a27 .a27-timeline--conversation .a27-timeline__item--milestone { align-items: stretch; padding: 0 0 var(--aizy-space-16) calc(var(--a27-timeline-dot) + var(--aizy-space-12)); text-align: left; }
  .a27 .a27-timeline--conversation .a27-timeline__item::before,
  .a27 .a27-timeline--conversation .a27-timeline__item--milestone::before { top: calc((var(--aizy-size-dense) * var(--aizy-leading-dense) - var(--a27-timeline-dot)) / 2); left: 0; transform: none; }
  .a27 .a27-timeline--conversation .a27-timeline__item::after { left: calc(var(--a27-timeline-dot) / 2); transform: translateX(-50%); }
  .a27 .a27-timeline--conversation .a27-timeline__item--milestone .a27-timeline__body { align-items: flex-start; }
  /* Ventana de chat pública: a toda la pantalla (sin margen, borde, radio ni sombra), hilo más apretado y el compositor con la zona segura inferior. */
  .a27 .a27-chat { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .a27 .a27-chat__head { padding: var(--aizy-space-12) var(--aizy-space-16); }
  .a27 .a27-chat .a27-thread { padding: var(--aizy-space-16); }
  .a27 .a27-chat__head .a27-cell-main__title { font-size: var(--aizy-size-title-sm); line-height: var(--aizy-leading-title-sm); }
  .a27 .a27-chat .a27-composer { margin: 0 var(--aizy-space-16) calc(var(--aizy-space-16) + var(--a27-safe-bottom)); }
}