/* ============================================================
   SAM — Piel Cyber-Municipal para el motor SDUI
   ------------------------------------------------------------
   Los módulos SDUI no traen CSS: vestirlos es obligación del
   host (contrato frontend-sdui §9.2). tokens.css ya hace el
   puente de COLOR (--sui-*); este archivo pone la IDENTIDAD:
   vidrio, glow, píldoras, micro-caps, muelles y móvil real.

   ── Por qué `.sdui-root.sdui-root` ────────────────────────────
   El motor inyecta su <style> en runtime, o sea DESPUÉS de este
   archivo. A igual especificidad ganaría él. Repetir la clase
   sube la especificidad (0,3,0 vs 0,2,0) sin un solo !important
   y sin depender del orden de carga.
   ============================================================ */

/* ============================================================
   1. Lienzo y tipografía
   ============================================================ */
.sdui-root.sdui-root {
  font-family: var(--font);
  /* El motor pide features de Inter ('cv02'…) que Montserrat no tiene. */
  font-feature-settings: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
}

/* Título de vista = titular editorial: mayúsculas, peso y luz (DESIGN §Typography) */
.sdui-root.sdui-root .sdui-ph-title {
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-heading, #fff);
  text-shadow: 0 0 14px var(--c-primary-text-shadow);
}
.sdui-root.sdui-root .sdui-ph-subtitle,
.sdui-root.sdui-root .sdui-card-subtitle {
  color: var(--c-text-muted);
  letter-spacing: 0.2px;
}
.sdui-root.sdui-root .sdui-page-header {
  border-bottom: 1px solid var(--c-outline-variant);
}

/* Títulos de tarjeta: peso, no gritos. Sin el tracking negativo del motor. */
.sdui-root.sdui-root .sdui-card-title,
.sdui-root.sdui-root h1,
.sdui-root.sdui-root h2,
.sdui-root.sdui-root h3,
.sdui-root.sdui-root h4 {
  letter-spacing: 0.5px;
  color: var(--c-heading, #fff);
}
.sdui-root.sdui-root .sdui-card-title { font-size: 16px; font-weight: 700; }
.sdui-root.sdui-root .sui-card.sdui-card-primary .sdui-card-title {
  color: var(--c-primary);
  text-shadow: 0 0 12px var(--c-primary-text-shadow);
}

/* Micro-caps: toda etiqueta de metadato habla el mismo idioma técnico.
   A 11px la etiqueta que dice QUÉ es el dato (el nombre del campo) obligaba
   a acercar el teléfono: quien tiene presbicia no la leía de inmediato.
   12px es el suelo para texto en mayúsculas con tracking (Biblia cap.2). */
.sdui-root.sdui-root .sui-label,
.sdui-root.sdui-root .sdui-stat-label,
.sdui-root.sdui-root .sdui-detail-label,
.sdui-root.sdui-root .sdui-tile-lbl,
.sdui-root.sdui-root .sdui-divider-text,
.sdui-root.sdui-root .sdui-donut-clabel,
.sdui-root.sdui-root .sdui-dropdown-title,
.sdui-root.sdui-root .sdui-table-wrap thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-text-variant);
}
.sdui-root.sdui-root .sdui-help,
.sdui-root.sdui-root .sdui-muted { color: var(--c-text-muted); }

/* Números: tabulares siempre (una columna de cifras no debe bailar) */
.sdui-root.sdui-root .sdui-stat-value,
.sdui-root.sdui-root .sdui-tile-val,
.sdui-root.sdui-root .sdui-kv-value,
.sdui-root.sdui-root .sdui-donut-total,
.sdui-root.sdui-root .sdui-gauge-val,
.sdui-root.sdui-root .sdui-ring-pct { font-variant-numeric: tabular-nums; }

/* ============================================================
   2. Superficies: vidrio iluminado, no cartón plano
   ============================================================ */
.sdui-root.sdui-root .sui-card,
.sdui-root.sdui-root .sdui-stat,
.sdui-root.sdui-root .sdui-data-card,
.sdui-root.sdui-root .sdui-table-wrap,
.sdui-root.sdui-root .sdui-list,
.sdui-root.sdui-root .sdui-clist,
.sdui-root.sdui-root .sdui-acc-item,
.sdui-root.sdui-root .sdui-calendar,
.sdui-root.sdui-root .sdui-code {
  background: var(--c-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-border-glass);
  border-radius: var(--r-xl);
  box-shadow: var(--glow-inset);
}
.sdui-root.sdui-root .sui-card {
  padding: var(--sp-md);
  transition: box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .sui-card:hover {
  box-shadow: var(--glow-primary), var(--glow-inset);
  border-color: var(--c-border-glass-strong);
}
.sdui-root.sdui-root .sui-card.sdui-card-primary {
  border-left: 3px solid var(--c-primary-bright);
  background:
    linear-gradient(180deg, var(--c-primary-glow-soft) 0%, transparent 46%),
    var(--c-glass);
  box-shadow: var(--glow-primary), var(--glow-inset);
}
.sdui-root.sdui-root .sui-card.sdui-card-subtle {
  background: rgba(22, 27, 41, 0.6);
  border-color: var(--c-outline-variant);
  box-shadow: none;
}
.sdui-root.sdui-root .sui-card.sdui-card-compact { padding: var(--sp-sm); }
.sdui-root.sdui-root .sdui-divider,
.sdui-root.sdui-root .sdui-divider-labeled::before,
.sdui-root.sdui-root .sdui-divider-labeled::after {
  border-top-color: var(--c-outline-variant);
}

/* ============================================================
   3. Botones: píldora, gradiente y 48px de dedo (Biblia cap.5)
   ============================================================ */
.sdui-root.sdui-root .sui-btn {
  min-height: var(--touch-min);
  padding: 0 var(--sp-lg);
  border: 0;
  border-radius: var(--r-full);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out),
              filter var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.sdui-root.sdui-root .sui-btn:active { transform: scale(0.97); }

/* PULSO AL PULSAR. El botón ya se hundía un 3%; en una pantalla táctil eso
   es poco acuse de recibo — el dedo tapa el botón justo cuando pasa. El
   pulso nace en el propio botón y se apaga solo, con el color que el botón
   ya tiene (currentColor), así que sirve igual al primario, al secundario y
   al de peligro sin declarar un color más. Se salta solo si el sistema pide
   menos animación (regla global de base.css). */
.sdui-root.sdui-root .sui-btn { position: relative; overflow: hidden; }
.sdui-root.sdui-root .sui-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, currentColor 0%, transparent 62%);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.sdui-root.sdui-root .sui-btn:active::after { animation: sdui-pulso-btn 0.45s var(--ease-out); }
@keyframes sdui-pulso-btn {
  from { opacity: 0.26; transform: scale(0); }
  to   { opacity: 0;    transform: scale(2.4); }
}
.sdui-root.sdui-root .sui-btn:focus-visible {
  outline: 2px solid var(--c-primary-bright);
  outline-offset: 2px;
  box-shadow: none;
}
.sdui-root.sdui-root .sui-btn-primary,
.sdui-root.sdui-root .sui-btn[data-prominence="max"] {
  background: linear-gradient(100deg, var(--c-primary-container), var(--c-secondary-container));
  color: var(--c-on-primary-container, #001a24);
  box-shadow: 0 0 18px var(--c-primary-glow);
}
.sdui-root.sdui-root .sui-btn-primary:hover,
.sdui-root.sdui-root .sui-btn[data-prominence="max"]:hover {
  background: linear-gradient(100deg, var(--c-primary-container), var(--c-secondary-container));
  box-shadow: var(--glow-primary-strong);
  filter: brightness(1.06);
}
.sdui-root.sdui-root .sui-btn-secondary {
  /* Vidrio TEÑIDO de marca, no blanco: con blanco, 102 botones del panel
     (secondary + los que no declaran variante) salian del mismo gris claro y
     solo el primario tenia color. */
  background: rgba(var(--c-primary-rgb), 0.10);
  color: var(--c-heading, #fff);
  border: 1px solid rgba(var(--c-primary-rgb), 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sdui-root.sdui-root .sui-btn-secondary:hover {
  background: rgba(var(--c-primary-rgb), 0.18);
  border-color: rgba(var(--c-primary-rgb), 0.6);
}
/* ghost: la accion DISCRETA (Ver mas, Olvidar, cerrar, volver). Sin fondo y
   con texto de marca. No tenia regla y salia con el gris del navegador. */
.sdui-root.sdui-root .sui-btn-ghost {
  background: transparent;
  color: var(--c-primary);
  border: 1px solid transparent;
  box-shadow: none;
}
.sdui-root.sdui-root .sui-btn-ghost:hover { background: var(--c-primary-glow-soft); }
/* Cerrar y volver son ICONOS: en reposo con tono de texto (todo en cian
   gritaria), y se encienden al pasar por encima. */
.sdui-root.sdui-root .sdui-modal-close,
.sdui-root.sdui-root .sdui-viewer-close,
.sdui-root.sdui-root .sdui-convh-back { color: var(--c-text-variant); }
.sdui-root.sdui-root .sdui-modal-close:hover,
.sdui-root.sdui-root .sdui-viewer-close:hover,
.sdui-root.sdui-root .sdui-convh-back:hover { color: var(--c-heading, #fff); background: var(--c-primary-glow-soft); }
/* Las opciones de un menu son texto de lista, no enlaces: un menu entero en
   cian se leeria como una lista de links. */
.sdui-root.sdui-root .sdui-dropdown-panel .sui-btn-ghost { color: var(--c-heading, #fff); }
.sdui-root.sdui-root .sui-btn-danger,
.sdui-root.sdui-root .sui-btn[data-tone="critical"] {
  background: var(--c-error-container);
  color: var(--c-on-error-container);
  box-shadow: 0 0 14px rgba(147, 0, 10, 0.5);
}
.sdui-root.sdui-root .sui-btn[data-prominence="muted"] {
  background: transparent;
  color: var(--c-text-variant);
  box-shadow: none;
}
.sdui-root.sdui-root .sui-btn[data-prominence="muted"]:hover { background: var(--c-primary-glow-soft); }
/* El botón pequeño seguía siendo un botón: a 38px de alto el pulgar fallaba
   (Biblia cap.5 pide 44px) y su texto a 12.5px se leía peor que el del resto.
   El padding lateral sube a --sp-md para que la píldora no salga aplastada. */
.sdui-root.sdui-root .sui-btn[data-size="sm"] { min-height: 44px; padding: 0 var(--sp-md); font-size: 13px; }
.sdui-root.sdui-root .sui-btn[data-size="lg"] { min-height: 54px; padding: 0 var(--sp-xl); font-size: 15px; }

/* ============================================================
   4. Campos: monocromo oscuro, foco "encendido" (DESIGN §Input)
   ============================================================ */
.sdui-root.sdui-root .sui-input,
.sdui-root.sdui-root input[type="text"],
.sdui-root.sdui-root input[type="number"],
.sdui-root.sdui-root input[type="date"],
.sdui-root.sdui-root input[type="search"],
.sdui-root.sdui-root select,
.sdui-root.sdui-root textarea {
  min-height: var(--touch-min);
  padding: 12px 14px;
  background: var(--c-input-bg, #111111);
  color: var(--c-text);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--r-md);
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.sdui-root.sdui-root textarea,
.sdui-root.sdui-root .sdui-textarea { min-height: 96px; line-height: 1.5; }
.sdui-root.sdui-root .sui-input:focus,
.sdui-root.sdui-root input:focus,
.sdui-root.sdui-root select:focus,
.sdui-root.sdui-root textarea:focus {
  border-color: var(--c-primary-bright);
  box-shadow: 0 0 0 1px var(--c-primary-bright), 0 0 14px var(--c-primary-glow);
}
.sdui-root.sdui-root .sui-input::placeholder,
.sdui-root.sdui-root textarea::placeholder { color: var(--c-text-muted); }
.sdui-root.sdui-root .sdui-checkbox,
.sdui-root.sdui-root .sdui-slider,
.sdui-root.sdui-root .sdui-rs-input,
.sdui-root.sdui-root .sdui-radio input { accent-color: var(--c-primary-bright); }
/* La caja numérica del slider es un acompañante compacto, no un input de
   formulario: sin esto hereda los 48px + padding 14px de arriba y la fila
   (slider + número) desborda la tarjeta en columnas estrechas. */
.sdui-root.sdui-root input.sdui-slider-val {
  min-height: 40px;
  padding: 6px 6px;
  width: 4.5rem;
  min-width: 0;
  flex: 0 1 4.5rem;
}
.sdui-root.sdui-root .sdui-slider-row { min-width: 0; }
.sdui-root.sdui-root .sdui-slider { min-width: 0; }
/* Error: borde + icono + texto (nunca solo color, cap.15) */
.sdui-root.sdui-root .sdui-invalid .sui-input,
.sdui-root.sdui-root .sui-input-error {
  border-color: var(--c-error);
  border-width: 2px;
  box-shadow: 0 0 10px rgba(255, 180, 171, 0.25);
}
.sdui-root.sdui-root .sdui-field-error { color: var(--c-error); }

/* Dropzone en modo claro: el panel oscuro translúcido (pensado para el canvas
   negro) parecía un agujero; superficie clara con tinte suave de marca.
   El resto del dropzone vive en §9.5. */
:root[data-theme='light'] .sdui-root.sdui-root .sdui-fileup-zone {
  background: color-mix(in srgb, var(--c-primary, #38bdf8) 4%, #fff);
  border-color: var(--c-outline-variant);
  color: var(--c-text-muted);
}
:root[data-theme='light'] .sdui-root.sdui-root .sdui-fileup-zone:hover {
  background: color-mix(in srgb, var(--c-primary, #38bdf8) 8%, #fff);
  border-color: var(--c-primary-bright);
}

/* ============================================================
   5. Pestañas: píldora encendida
   ============================================================ */
.sdui-root.sdui-root .sdui-tabs { border-bottom: 1px solid var(--c-outline-variant); gap: 4px; }
.sdui-root.sdui-root .sdui-tab-btn {
  min-height: var(--touch-min);
  padding: 0 var(--sp-sm);
  border-radius: var(--r-full);
  border-bottom: 0;
  margin-bottom: 0;
  /* La pestaña es navegación principal: a 12.5px en mayúsculas costaba
     distinguir cuál sección se estaba mirando de un vistazo. */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-text-muted);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .sdui-tab-btn:hover { color: var(--c-heading, #fff); background: var(--c-primary-glow-soft); }
/* El fondo encendido vive en la píldora deslizante (.sdui-tab-thumb): así el
   cambio de pestaña se ve como un viaje, no como un salto. El botón activo
   solo cambia el color del texto. */
.sdui-root.sdui-root .sdui-tab-btn.active,
.sdui-root.sdui-root .sui-tab.is-active {
  color: var(--c-on-primary);
  background: transparent;
  box-shadow: none;
}
.sdui-root.sdui-root .sdui-tab-thumb {
  background: linear-gradient(100deg, var(--c-primary-container), var(--c-secondary-container));
  box-shadow: 0 0 14px var(--c-primary-glow);
  border-radius: var(--r-full);
}
.sdui-root.sdui-root .sdui-tab-badge { background: var(--c-surface-high); color: var(--c-text); }
.sdui-root.sdui-root .sdui-segmented {
  background: var(--c-surface-low);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--r-full);
}
/* Filtro segmentado ("Todos / Mis grupos"): medía 36px en vivo, o sea que el
   dedo caía entre las dos opciones y cambiaba el filtro equivocado. 44px. */
/* Las opciones deben LEERSE sin esfuerzo: peso alto y micro-caps como el
   resto de labels del sistema; la inactiva sube de tono al pasar. */
.sdui-root.sdui-root .sdui-seg-btn {
  border-radius: var(--r-full);
  min-height: 44px;
  color: var(--c-text-muted);
  font-weight: 700;
  letter-spacing: 0.4px;
}
.sdui-root.sdui-root .sdui-seg-btn:hover { color: var(--c-text); }
.sdui-root.sdui-root .sdui-seg-btn.active {
  background: transparent;
  color: var(--c-on-primary);
  font-weight: 800;
  box-shadow: none;
  text-shadow: 0 0 10px rgba(2, 6, 15, 0.35);
}
.sdui-root.sdui-root .sdui-seg-thumb {
  background: var(--c-primary-container);
  box-shadow: 0 0 12px var(--c-primary-glow);
  border-radius: var(--r-full);
}

/* ============================================================
   6. Badges, chips y salud del sistema
   ============================================================ */
.sdui-root.sdui-root .sui-badge,
.sdui-root.sdui-root .sdui-badge,
.sdui-root.sdui-root .sdui-summary-chip,
.sdui-root.sdui-root .sdui-risk-badge {
  border-radius: var(--r-sm);
  padding: 3px 10px;
  /* El badge es el ESTADO del registro (abierto, vencido, riesgo alto): a 11px
     en mayúsculas apretadas había que fijar la vista para leerlo. */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid var(--c-outline-variant);
  background: var(--c-surface-low);
  color: var(--c-text-variant);
}
.sdui-root.sdui-root .sdui-badge-success,
.sdui-root.sdui-root .sui-badge-success { color: var(--c-ok); border-color: rgba(74, 222, 128, 0.4); }
.sdui-root.sdui-root .sdui-badge-warning,
.sdui-root.sdui-root .sui-badge-warning { color: var(--c-warn); border-color: rgba(251, 191, 36, 0.4); }
.sdui-root.sdui-root .sdui-badge-danger,
.sdui-root.sdui-root .sui-badge-danger { color: var(--c-error); border-color: rgba(255, 180, 171, 0.4); }
.sdui-root.sdui-root .sdui-badge-info,
.sdui-root.sdui-root .sui-badge-info { color: var(--c-primary); border-color: var(--c-border-glass); }

/* Beacon: el punto "activo" late como el resto del panel */
.sdui-root.sdui-root .sdui-status-dot,
.sdui-root.sdui-root .sdui-risk-dot,
.sdui-root.sdui-root .sdui-feed-dot { position: relative; }
.sdui-root.sdui-root .sdui-status-ok .sdui-status-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: sdui-beacon 1.8s var(--ease-out) infinite;
}
@keyframes sdui-beacon {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ============================================================
   7. Tablas: densas en escritorio, TARJETAS en móvil (cap.13)
   ============================================================ */
.sdui-root.sdui-root .sdui-table-wrap thead th {
  /* Vidrio fuerte del tema (oscuro .92 / claro .94): la cabecera sticky flota
     sobre las filas sin hardcodear un color que rompa el modo claro. */
  background: var(--c-glass-strong);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--c-outline-variant);
}
.sdui-root.sdui-root .sdui-table-wrap tbody td {
  border-bottom: 1px solid color-mix(in srgb, var(--c-outline-variant) 45%, transparent);
  color: var(--c-text);
}
/* El encabezado se parte en dos líneas y la flecha ⇅ solo aparece donde
   sirve (2026-09-16). Medido en helpdesk: con cada rótulo en una línea, en
   mayúsculas espaciadas y con su flecha, seis columnas de CIFRAS pedían 1104px
   y la tabla —lo que el operador viene a ver— se cortaba en 711. Un número de
   dos dígitos no necesita una columna de 160px. La flecha sigue en la columna
   ordenada y aparece al pasar el ratón o con el foco: ordenar se descubre
   donde se va a usar. */
@media (min-width: 701px) {
  /* Solo en escritorio: en el teléfono una tabla es tarjetas, o su formato
     `grid` trae sus propios márgenes (y estos 8px lo desbordaban). */
  .sdui-root.sdui-root .sdui-table-wrap thead th {
    white-space: normal;
    vertical-align: bottom;
  }
  .sdui-root.sdui-root .sdui-table-wrap thead th .sdui-th-sort {
    white-space: normal;
    padding-left: 8px;
    padding-right: 8px;
  }
}
.sdui-root.sdui-root .sdui-table-wrap thead th[aria-sort="none"]:not(:hover):not(:focus-within) .sdui-sort-ico { display: none; }
.sdui-root.sdui-root .sdui-table-wrap tbody tr { transition: background var(--t-fast) var(--ease-out); }
.sdui-root.sdui-root .sdui-table-wrap tbody tr.fc-row-clickable:hover td { background: var(--c-primary-glow-soft); }
.sdui-root.sdui-root .sdui-detail-box { background: var(--c-surface-lowest); border-radius: var(--r-md); }
/* Cabecera de grupo (data_table.groupBy, motor 0.20): una franja de vidrio
   fuerte con la etiqueta en micro-caps y el triángulo encendido al abrir. Se
   distingue de una fila por peso y forma, no solo por el tono. */
.sdui-root.sdui-root .sdui-table-wrap tbody tr.sdui-group-row td {
  background: var(--c-glass-strong);
  border-top: 1px solid var(--c-outline-variant);
  border-bottom: 1px solid var(--c-outline-variant);
  color: var(--c-heading, #fff);
  font-weight: 700;
}
.sdui-root.sdui-root .sdui-table-wrap tbody tr.sdui-group-row:hover td { background: var(--c-primary-glow-soft); }
.sdui-root.sdui-root .sdui-group-lbl {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
}
.sdui-root.sdui-root .sdui-group-tri { color: var(--c-text-muted); }
.sdui-root.sdui-root .sdui-group-row.is-open .sdui-group-tri {
  color: var(--c-primary);
  text-shadow: 0 0 8px var(--c-primary-text-shadow);
}
.sdui-root.sdui-root .sdui-group-toggle:focus-visible,
.sdui-root.sdui-root .sdui-group-open:focus-visible { outline-color: var(--c-primary-bright); }

@media (max-width: 700px) {
  /* El motor ya marca cada celda con data-label (el encabezado viaja con
     el dato); aquí la fila deja de ser fila y pasa a ser tarjeta. */
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) {
    overflow-x: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) thead { display: none; }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) table,
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody,
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tr,
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) td { display: block; width: 100%; }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr {
    margin-bottom: var(--sp-xs);
    padding: 6px 0;
    background: var(--c-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    backdrop-filter: var(--blur-glass);
    border: 1px solid var(--c-border-glass);
    border-radius: var(--r-lg);
  }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr:nth-child(even) td { background: transparent; }
  /* Columna que el modulo marca como prescindible en un telefono. */
  .sdui-root.sdui-root .sdui-table-wrap .sdui-col-phone-hide { display: none; }
  /* Celda sin valor: en una mesa deja un hueco; en una tarjeta deja su
     etiqueta huerfana ("SLA" y nada al lado). Se retira la fila entera. */
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody td:empty { display: none; }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 0;
    padding: 8px 14px;
    text-align: right;
    flex-wrap: wrap;
  }
  /* El SUBTITULO de una celda (subKey) va DEBAJO del valor, no a su lado: en
     una tarjeta de telefono compite por el mismo ancho y estruja el titulo a
     tres o cuatro lineas de dos palabras. */
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody td .sdui-cell-sub {
    /* flex-basis 100%: dentro de un contenedor flex, `display:block` no baja
       de linea — hay que pedirle la fila entera. */
    flex: 1 0 100%;
    margin-top: 2px;
  }
  /* En móvil este pseudo-elemento ES el encabezado de columna: sin él, el
     operador ve un dato suelto sin saber de qué campo es. A 10px era ilegible
     en la calle (Biblia cap.2), y es justo la mitad que el usuario necesita
     leer primero. Sube al mismo suelo que el resto del texto. */
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-text-muted);
    text-align: left;
  }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody td[data-label='']::before { display: none; }
  /* La fila de detalle expandida no es una celda de datos: sin etiqueta */
  .sdui-root.sdui-root .sdui-detail-cell::before { display: none; }
  .sdui-root.sdui-root .sdui-detail-cell { display: block; text-align: left; }

  /* Cabecera de grupo: deja de ser una tarjeta más y pasa a SEPARADOR
     plegable de ancho completo. Arriba la etiqueta (toda la franja se toca);
     debajo los totales, TRES por fila, rótulo pequeño encima y cifra debajo.
     Con dos por fila y tiles de tarjeta, una dirección medía 260px y siete
     eran casi dos metros de scroll antes de llegar a un grupo. Sin scroll
     lateral: lo que no cabe baja. */
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--sp-sm) 0 var(--sp-xs);
    padding: 4px 10px 10px;
    background: var(--c-glass-strong);
    border: 1px solid var(--c-border-glass-strong);
    border-left: 3px solid var(--c-outline-variant);
    border-radius: var(--r-lg);
  }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-row.is-open {
    border-left-color: var(--c-primary-bright);
    box-shadow: var(--glow-primary);
  }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-row td {
    background: transparent;
    border: 0;
  }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-row td.sdui-group-cell {
    flex: 1 0 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 0;
    text-align: left;
  }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-row td.sdui-group-total {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 4px 8px;
    text-align: left;
    background: var(--c-surface-lowest);
    border-radius: var(--r-md);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
  }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-row td.sdui-group-total::before {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 0.6px;
  }
  /* Una columna sin total (aggregate: none) no es un tile vacío. */
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-row td.sdui-group-total:empty { display: none; }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-row { gap: 4px; padding: 2px 8px 8px; }
  /* Las filas del grupo abierto cuelgan del separador: sangradas y con un
     hilo de luz a la izquierda, para que se lea de quién son. */
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-child {
    width: auto;
    margin-left: var(--sp-sm);
    border-left: 2px solid var(--c-primary-glow);
  }
  .sdui-root.sdui-root .sdui-table-wrap:not(.sdui-table-grid):not(.sdui-table-rows) tbody tr.sdui-group-child td:first-child { padding-left: 14px; }
}

/* ---- Tabla que SIGUE siendo tabla en el teléfono (phoneLayout "grid", motor 0.22) ----
   Todo lo de arriba (tarjetas) va con :not(.sdui-table-grid). Aquí la matriz se
   queda: cabecera fija, nombre fijo a la izquierda y los números en columnas
   estrechas que se deslizan de lado. El motor trae la mecánica (sticky, scroll
   en los dos ejes, alto acotado, data-more); la skin pone vidrio, luz y ritmo.
   Las celdas fijas van en superficie OPACA del tema: con vidrio, los números
   que pasan por debajo se leerían a través del nombre. */
@media (max-width: 700px) {
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid thead th {
    font-size: 10px;
    letter-spacing: 0.3px;
    padding: 6px 3px;
    background: var(--c-surface-low);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid tbody td {
    padding: 4px 3px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid .sdui-col-sticky { background: var(--c-surface); }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid thead th.sdui-col-sticky { background: var(--c-surface-low); }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid tbody tr:nth-child(even) td.sdui-col-sticky { background: var(--c-surface); }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid tbody tr.fc-row-clickable:hover td.sdui-col-sticky { background: var(--c-surface-container); }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid tbody td.sdui-col-sticky { color: var(--c-heading, var(--c-text)); font-weight: 600; }
  /* Cabecera de grupo: UNA fila, como en escritorio. La franja de vidrio
     fuerte pasa a superficie alta opaca en la celda fija; el filo cian a la
     izquierda dice "abierto" con forma, no solo con tono. */
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid tbody tr.sdui-group-row td { padding-top: 0; padding-bottom: 0; }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid tbody tr.sdui-group-row td.sdui-col-sticky {
    background: var(--c-surface-high);
    box-shadow: inset 3px 0 0 var(--c-outline-variant);
  }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid tbody tr.sdui-group-row.is-open td.sdui-col-sticky {
    box-shadow: inset 3px 0 0 var(--c-primary-bright);
  }
  /* El nombre de la dirección en minúsculas y hasta tres líneas: en helpdesk
     casi todas empiezan por «Dirección de…» y en mayúsculas cortadas a dos
     líneas se leían todas iguales. */
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid .sdui-group-lbl {
    font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 700;
    -webkit-line-clamp: 3; line-clamp: 3;
  }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid tbody td.sdui-col-sticky { padding-left: 8px; }
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid tbody tr.sdui-group-child td.sdui-col-sticky {
    padding-left: 22px;
    box-shadow: inset 2px 0 0 var(--c-primary-glow);
  }
  /* Hay más tabla a la izquierda: la columna fija proyecta su filo de luz. */
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid[data-more='start'] .sdui-col-sticky,
  .sdui-root.sdui-root .sdui-table-wrap.sdui-table-grid[data-more='both'] .sdui-col-sticky {
    box-shadow: 1px 0 0 var(--c-border-glass), 6px 0 12px -6px var(--c-primary-glow);
  }
}

/* ---- Fila compacta en el teléfono (phoneLayout "row", motor 0.25.0) ----
   Las tarjetas de arriba excluyen .sdui-table-rows. Aquí la tabla es UNA caja de
   vidrio con filas de lista separadas por su línea, como la bandeja del
   livechat: la fila mide ~64px en vez de 250-470. La superficie de la fila es
   opaca (--c-surface-container): al deslizarla pasa por encima del color de la
   acción, y con vidrio ese color se leería a través del texto. */
.sdui-root.sdui-root .sdui-table-wrap.sdui-table-rows {
  background: var(--c-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-border-glass);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sdui-root.sdui-root .sdui-table-rows tbody td.sdui-trow-cell { border-bottom-color: var(--c-border-glass); }
.sdui-root.sdui-root .sdui-table-rows .sdui-trow,
.sdui-root.sdui-root .sdui-table-rows .sdui-trow-detail { background: var(--c-surface-container); }
.sdui-root.sdui-root .sdui-table-rows .sdui-trow-title { color: var(--c-heading, var(--c-text)); }
.sdui-root.sdui-root .sdui-table-rows .sdui-trow-sub,
.sdui-root.sdui-root .sdui-table-rows .sdui-trow-meta { color: var(--c-text-muted); }
.sdui-root.sdui-root .sdui-table-rows .sdui-trow.is-clickable:active { background: var(--c-surface-high); }
.sdui-root.sdui-root .sdui-table-rows .sdui-trow[aria-expanded='true'] { box-shadow: inset 3px 0 0 var(--c-primary-bright); }
.sdui-root.sdui-root .sdui-table-rows tbody tr.sdui-group-row td.sdui-group-cell {
  background: var(--c-glass-strong);
  border-bottom: 1px solid var(--c-border-glass);
  box-shadow: inset 3px 0 0 var(--c-outline-variant);
}
.sdui-root.sdui-root .sdui-table-rows tbody tr.sdui-group-row.is-open td.sdui-group-cell { box-shadow: inset 3px 0 0 var(--c-primary-bright); }
.sdui-root.sdui-root .sdui-row-more { color: var(--c-text-muted); }
.sdui-root.sdui-root .sdui-row-more:hover,
.sdui-root.sdui-root .sdui-row-more:focus-visible { color: var(--c-primary); background: var(--c-primary-glow-soft); }
/* Deslizar: con la fila de una list en vidrio, la pista se vuelve opaca solo
   mientras se mueve. */
.sdui-root.sdui-root .sdui-swipe.is-swiping > .sdui-list-swipe-track { background: var(--c-surface-container); }
.sdui-root.sdui-root .sdui-list-swipe { border-bottom-color: var(--c-border-glass); }
/* Hoja de acciones del «⋯»: el vidrio de los demás paneles flotantes. */
.sdui-root.sdui-acciones-back {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.sdui-root .sdui-acciones {
  background: var(--c-glass-strong);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-border-glass-strong);
  border-bottom: 0;
  box-shadow: var(--glow-primary-strong);
  color: var(--c-text);
}
.sdui-root .sdui-acciones-item { color: var(--c-text); }
.sdui-root .sdui-acciones-item:hover,
.sdui-root .sdui-acciones-item:focus-visible { background: var(--c-primary-glow-soft); }
.sdui-root .sdui-acciones-item.is-danger { color: var(--c-error, var(--sui-danger)); }
.sdui-root .sdui-acciones-title,
.sdui-root .sdui-acciones-cancel { color: var(--c-text-muted); }

/* Tirar para actualizar (pullToRefresh, motor 0.25.0): la píldora del
   indicador es vidrio fuerte con el filo cian encendido al pasar el umbral. */
.sdui-root.sdui-root .sdui-ptr {
  background: var(--c-glass-strong);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-border-glass);
  color: var(--c-text-muted);
  letter-spacing: 0.4px;
}
.sdui-root.sdui-root .sdui-ptr.is-ready,
.sdui-root.sdui-root .sdui-ptr.is-loading {
  color: var(--c-primary);
  border-color: var(--c-border-glass-strong);
  box-shadow: var(--glow-primary);
}

/* ============================================================
   8. KPI y tarjetas de dato
   ============================================================ */
.sdui-root.sdui-root .sdui-stat { padding: var(--sp-md); }
.sdui-root.sdui-root .sdui-stat-value {
  font-weight: 900;
  color: var(--c-heading, #fff);
  text-shadow: 0 0 18px var(--c-primary-text-shadow);
}
.sdui-root.sdui-root .sdui-stat.sdui-stat-primary {
  border-color: var(--c-border-glass-strong);
  background:
    linear-gradient(160deg, var(--c-primary-glow-soft) 0%, transparent 62%),
    var(--c-glass);
  box-shadow: var(--glow-primary), var(--glow-inset);
}
.sdui-root.sdui-root .sdui-stat.sdui-stat-primary .sdui-stat-value { color: var(--c-heading, #fff); }
.sdui-root.sdui-root .sdui-stat.sdui-stat-primary .sdui-stat-label { color: var(--c-primary); }
/* KPI elegido (stat.selectedWhen, motor 0.20): queda encendido y con la barra
   de luz al pie que pinta el motor, aquí en cian brillante. La luz del KPI que
   se toca (hover, foco, flecha) es la de las tarjetas enlace, más abajo
   (.sdui-is-link / .sdui-link-arrow, compartidas con card desde 0.21). */
.sdui-root.sdui-root .sdui-stat.is-selected,
.sdui-root.sdui-root .sdui-stat.sdui-stat-primary.is-selected {
  border-color: var(--c-primary-bright);
  background:
    linear-gradient(0deg, var(--c-primary-glow-soft) 0%, transparent 55%),
    var(--c-glass);
}
.sdui-root.sdui-root .sdui-stat.is-selected::after {
  background: var(--c-primary-bright);
  box-shadow: 0 0 10px var(--c-primary-glow);
}
.sdui-root.sdui-root .sdui-stat-icon {
  background: var(--c-primary-glow-soft);
  border: 1px solid var(--c-border-glass);
  border-radius: var(--r-md);
  color: var(--c-primary);
}

/* ---- Cifra compacta y banda de cifras (motor 0.37.0) ----
   Las cifras que acompañan a una vista que es su objeto (el organigrama):
   vidrio fino, esquinas más cerradas que una tarjeta (a este tamaño la de
   24 px las volvía pastillas) y la etiqueta en micro-caps con menos tracking.
   La banda la reparte el motor; aquí solo el vestido. */
.sdui-root.sdui-root .sdui-stat.sdui-stat-compact { padding: 8px 12px; border-radius: var(--r-lg); }
.sdui-root.sdui-root .sdui-stat-compact .sdui-stat-label { letter-spacing: 0.8px; }
.sdui-root.sdui-root .sdui-stat-compact .sdui-stat-icon { border-radius: var(--r-sm, 6px); }
@media (max-width: 640px) {
  .sdui-root.sdui-root .sdui-stat.sdui-stat-compact { padding: 6px 10px; }
}

/* ---- Tarjetas con imagen y tarjetas enlace (motor 0.21.0) ----
   El motor pone las capas (foto, velo, arte) y el contraste; aquí va la luz.
   Con foto, el borde se enciende y el velo lleva un barrido cian muy leve de
   abajo arriba: la foto queda "dentro" del vidrio en vez de pegada encima. */
.sdui-root.sdui-root .sdui-stat.sdui-stat-has-backdrop {
  border-color: var(--c-border-glass-strong);
}
.sdui-root.sdui-root .sdui-stat-backdrop::after {
  background:
    linear-gradient(0deg, var(--c-primary-glow-soft) 0%, transparent 55%),
    rgb(var(--sui-scrim-rgb) / var(--sdui-dim, 0.5));
}
/* Sobre la foto manda el texto claro, también en la tarjeta héroe (que en el
   skin pinta el número y la etiqueta con tinta de marca). */
.sdui-root.sdui-root .sdui-stat.sdui-stat-has-backdrop .sdui-stat-value,
.sdui-root.sdui-root .sdui-stat.sdui-stat-has-backdrop.sdui-stat-primary .sdui-stat-value {
  color: var(--sui-on-image);
  text-shadow: var(--sui-on-image-shadow), 0 0 18px var(--c-primary-text-shadow);
}
.sdui-root.sdui-root .sdui-stat.sdui-stat-has-backdrop .sdui-stat-label,
.sdui-root.sdui-root .sdui-stat.sdui-stat-has-backdrop.sdui-stat-primary .sdui-stat-label {
  color: var(--sui-on-image-muted);
  text-shadow: var(--sui-on-image-shadow);
}
/* El arte es un holograma: brilla con el acento, no con un marco. */
.sdui-root.sdui-root .sdui-stat-art-img {
  filter: drop-shadow(0 0 10px var(--c-primary-glow));
}

/* Enlace: la afordancia visible (›) en cian, y más luz al pasar o enfocar.
   Pulsar hunde la tarjeta un pelo: responde al dedo sin moverse de sitio. */
.sdui-root.sdui-root .sdui-link-arrow {
  color: var(--c-primary);
  text-shadow: 0 0 10px var(--c-primary-text-shadow);
}
.sdui-root.sdui-root .sdui-stat.sdui-is-link,
.sdui-root.sdui-root .sui-card.sdui-is-link {
  transition: box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.sdui-root.sdui-root .sdui-stat.sdui-is-link:hover,
.sdui-root.sdui-root .sui-card.sdui-is-link:hover {
  border-color: var(--c-border-glass-strong);
  box-shadow: var(--glow-primary), var(--glow-inset);
}
.sdui-root.sdui-root .sdui-stat.sdui-is-link:focus-visible,
.sdui-root.sdui-root .sui-card.sdui-is-link:focus-visible {
  outline: none;
  border-color: var(--c-primary-bright);
  box-shadow: var(--sui-ring), var(--glow-primary-strong);
}
.sdui-root.sdui-root .sdui-stat.sdui-is-link:active,
.sdui-root.sdui-root .sui-card.sdui-is-link:active {
  transform: scale(0.985);
}
.sdui-root.sdui-root .sdui-tile {
  background: rgba(22, 27, 41, 0.75);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--r-md);
}
.sdui-root.sdui-root .sdui-data-card { padding: var(--sp-sm) var(--sp-md); }
.sdui-root.sdui-root .sdui-data-card-accent { border-left: 4px solid var(--c-primary-bright); }
.sdui-root.sdui-root .sdui-data-card.sdui-clickable {
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.sdui-root.sdui-root .sdui-data-card.sdui-clickable:hover {
  box-shadow: var(--glow-primary), var(--glow-inset);
  transform: translateY(-2px);
}
.sdui-root.sdui-root .sdui-data-card-foot,
.sdui-root.sdui-root .sdui-kv-row,
.sdui-root.sdui-root .sdui-feed-item { border-color: rgba(62, 72, 79, 0.4); }

/* ============================================================
   9. Gráficos: barras y pistas con luz propia
   ============================================================ */
.sdui-root.sdui-root .sdui-chart-bar {
  background: linear-gradient(180deg, var(--c-primary-bright), var(--c-secondary-container));
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: 0 0 12px var(--c-primary-glow);
  transition: height var(--t-slow) var(--ease-out);
}
.sdui-root.sdui-root .sdui-hbar-fill,
.sdui-root.sdui-root .sdui-progress-fill {
  background: linear-gradient(100deg, var(--c-primary-container), var(--c-secondary-container));
  box-shadow: 0 0 10px var(--c-primary-glow);
  transition: width var(--t-slow) var(--ease-out);
}
.sdui-root.sdui-root .sdui-hbar-track,
.sdui-root.sdui-root .sdui-progress-track {
  background: var(--c-surface-low);
  border: 1px solid var(--c-outline-variant);
}
.sdui-root.sdui-root .sdui-spark { filter: drop-shadow(0 0 6px var(--c-primary-glow)); }
.sdui-root.sdui-root .sdui-heading-accent::before {
  background: var(--c-primary-bright);
  box-shadow: 0 0 10px var(--c-primary-glow);
}

/* ============================================================
   9.5 Controles con identidad (assets adaptados a tokens)
   ------------------------------------------------------------
   Base: Uiverse.io (switch de @gharsh11032000, loader de
   @rushik0507), re-vestidos con los tokens del sistema — ni un
   color literal: cambiar el tema los cambia a todos.
   ============================================================ */

/* ---- Interruptor: perilla que viaja + halo al encender ---- */
.sdui-root.sdui-root .sdui-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
}
.sdui-root.sdui-root .sdui-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
/* El knob del switch es .sdui-switch-slider (motor ≥0.6.1). Antes se llamaba
   .sdui-slider — la MISMA clase del input range del componente slider — y este
   bloque absolutizaba el range sobre toda la card (el "aro gigante" + puntito
   gris suelto vistos en Conocimiento y el SDUI Demo). Renombrado en origen. */
.sdui-root.sdui-root .sdui-switch-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--c-surface-low);
  border: 2px solid var(--c-outline-variant);
  border-radius: var(--r-full);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sdui-root.sdui-root .sdui-switch-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--c-text-muted);
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.sdui-root.sdui-root .sdui-switch input:checked + .sdui-switch-slider {
  border-color: var(--c-primary);
  background: var(--c-primary-container);
  box-shadow: 0 0 18px var(--c-primary-glow);
}
.sdui-root.sdui-root .sdui-switch input:checked + .sdui-switch-slider::before {
  transform: translateX(22px);
  background: #fff;
}
.sdui-root.sdui-root .sdui-switch input:focus-visible + .sdui-switch-slider {
  outline: 2px solid var(--c-primary-bright);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  /* El sistema manda MIENTRAS la persona no elija otra cosa
     (Configuración → Movimiento). */
  :root:not([data-motion='full']) {
  .sdui-root.sdui-root .sdui-switch-slider,
  .sdui-root.sdui-root .sdui-switch-slider::before { transition: none; }
  }
}

/* ---- neo-toggle: el switch "Cyber Municipal Command" (DESIGN.md §15) ----
   Para EL interruptor protagonista de una vista. Pista con rejilla y
   analizador de espectro que solo late encendido; perilla con anillo que
   viaja; baliza de estado. Declarado con variant:"neo" en un toggle. ---- */
.sdui-root.sdui-root .sdui-switch-neo { gap: 12px; }
.sdui-root.sdui-root .neo-toggle {
  position: relative;
  display: inline-block;
  width: 88px;
  height: 40px;
  flex: 0 0 auto;
  cursor: pointer;
}
.sdui-root.sdui-root .neo-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.sdui-root.sdui-root .neo-track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: var(--c-surface-lowest);
  border: 1px solid var(--c-outline-variant);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .neo-grid-layer {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-primary-glow-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-primary-glow-soft) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.35;
}
.sdui-root.sdui-root .neo-spectrum-analyzer {
  /* A la IZQUIERDA: es la zona que queda visible cuando la perilla viaja a la
     derecha (encendido) — que es justo cuando el espectro late. A la derecha
     la propia perilla lo tapaba. */
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.sdui-root.sdui-root .neo-spectrum-bar {
  width: 3px;
  height: 4px;
  border-radius: 1px;
  background: var(--c-outline-variant);
  transition: background var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .neo-track-highlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--c-primary-glow-soft), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .neo-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sdui-root.sdui-root .neo-thumb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-outline-variant);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .neo-thumb-core {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--c-surface-high);
  display: grid;
  place-items: center;
  transition: background var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .neo-thumb-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-text-muted);
  transition: background var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .neo-status {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
}
.sdui-root.sdui-root .neo-status-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-outline-variant);
  transition: background var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
/* ---- encendido: la pista se ilumina, el espectro late, la perilla viaja ---- */
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-track {
  border-color: var(--c-primary);
  box-shadow: 0 0 18px var(--c-primary-glow), inset 0 0 12px var(--c-primary-glow-soft);
}
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-track .neo-track-highlight { opacity: 1; }
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-track .neo-spectrum-bar {
  background: var(--c-primary-bright);
  animation: neo-spectrum 0.9s ease-in-out infinite alternate;
}
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-track .neo-spectrum-bar:nth-child(1) { animation-delay: 0s; }
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-track .neo-spectrum-bar:nth-child(2) { animation-delay: 0.12s; }
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-track .neo-spectrum-bar:nth-child(3) { animation-delay: 0.24s; }
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-track .neo-spectrum-bar:nth-child(4) { animation-delay: 0.36s; }
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-track .neo-spectrum-bar:nth-child(5) { animation-delay: 0.48s; }
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-thumb { transform: translateX(48px); }
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-thumb .neo-thumb-ring {
  border-color: var(--c-primary-bright);
  box-shadow: 0 0 12px var(--c-primary-glow);
}
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-thumb .neo-thumb-core { background: var(--c-primary-container); }
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-thumb .neo-thumb-pulse {
  background: #fff;
  animation: neo-pulse 1.6s ease-in-out infinite;
}
.sdui-root.sdui-root .neo-toggle input:checked ~ .neo-status .neo-status-dot {
  background: var(--c-ok);
  box-shadow: 0 0 8px var(--c-ok);
}
.sdui-root.sdui-root .neo-toggle input:focus-visible ~ .neo-track {
  outline: 2px solid var(--c-primary-bright);
  outline-offset: 2px;
}
@keyframes neo-spectrum { from { height: 4px; } to { height: 14px; } }
@keyframes neo-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  /* El sistema manda MIENTRAS la persona no elija otra cosa
     (Configuración → Movimiento). */
  :root:not([data-motion='full']) {
  .sdui-root.sdui-root .neo-thumb { transition: none; }
  .sdui-root.sdui-root .neo-toggle input:checked ~ .neo-track .neo-spectrum-bar { animation: none; height: 10px; }
  .sdui-root.sdui-root .neo-toggle input:checked ~ .neo-thumb .neo-thumb-pulse { animation: none; }
  }
}

/* ---- sparkle-toggle: el interruptor del AGENTE IA (variant:"sparkle") ----
   Estructura donada por el equipo original del livechat. Apagado es un disco
   de vidrio inerte; encendido late en cian y despide partículas: dice "algo
   está pensando por ti", no un simple on/off. El grado, tamaño y duración de
   cada partícula vienen del inline style que pinta el motor. ---- */
.sdui-root.sdui-root .sdui-switch-sparkle {
  gap: 10px;
  align-items: center;
  padding-bottom: 0;
}
.sdui-root.sdui-root .sdui-switch-sparkle .toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sdui-root.sdui-root .toggle-label {
  display: inline-flex;
  flex: 0 0 auto;
}
.sdui-root.sdui-root .cont-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  /* Apagado: disco de vidrio del sistema, sin luz propia. */
  background: var(--c-surface-lowest);
  border: 1px solid var(--c-outline-variant);
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: background var(--t-fast, 160ms) ease, border-color var(--t-fast, 160ms) ease,
    box-shadow var(--t-fast, 160ms) ease, transform var(--t-fast, 160ms) ease;
}
.sdui-root.sdui-root .cont-icon .icon {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  fill: var(--c-text-variant);
  transition: fill var(--t-fast, 160ms) ease, transform var(--t-fast, 160ms) ease;
}
.sdui-root.sdui-root .cont-icon .sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--width, 1) * 2.5px);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: #fff;
  opacity: 0;
  /* Apagado no hay partículas: el destello es el ESTADO, no decoración. */
  transform: rotate(calc(var(--deg, 0) * 1deg)) translateY(0) scale(0);
}
/* ---- encendido ---- */
.sdui-root.sdui-root .toggle-input:checked ~ .toggle-label .cont-icon {
  background: linear-gradient(140deg, var(--c-primary) 0%, var(--c-secondary, var(--c-primary-bright)) 100%);
  border-color: var(--c-primary-bright);
  box-shadow: 0 0 16px var(--c-primary-glow), inset 0 0 10px rgba(255, 255, 255, 0.25);
}
.sdui-root.sdui-root .toggle-input:checked ~ .toggle-label .cont-icon .icon {
  fill: var(--c-on-primary, #04141b);
  transform: scale(1.08);
}
.sdui-root.sdui-root .toggle-input:checked ~ .toggle-label .cont-icon .sparkle {
  animation: sdui-sparkle-out calc(0.9s + var(--duration, 6) * 0.11s) linear infinite;
}
.sdui-root.sdui-root .sdui-switch-sparkle:hover .cont-icon { transform: translateY(-1px); }
.sdui-root.sdui-root .sdui-switch-sparkle:active .cont-icon { transform: scale(0.94); }
.sdui-root.sdui-root .toggle-input:focus-visible ~ .toggle-label .cont-icon {
  outline: 2px solid var(--c-primary-bright);
  outline-offset: 3px;
}
@keyframes sdui-sparkle-out {
  0% { opacity: 0; transform: rotate(calc(var(--deg, 0) * 1deg)) translateY(2px) scale(0.2); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--deg, 0) * 1deg)) translateY(22px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  /* El sistema manda MIENTRAS la persona no elija otra cosa
     (Configuración → Movimiento). */
  :root:not([data-motion='full']) {
  .sdui-root.sdui-root .toggle-input:checked ~ .toggle-label .cont-icon .sparkle { animation: none; }
  .sdui-root.sdui-root .cont-icon,
  .sdui-root.sdui-root .cont-icon .icon { transition: none; }
  }
}

/* ---- Loader: arco que respira mientras gira ---- */
.sdui-root.sdui-root .sdui-spinner {
  transform-origin: center;
  animation: sdui-spin-rot 2s linear infinite;
  flex: 0 0 auto;
}
.sdui-root.sdui-root .sdui-spinner-sm { width: 22px; height: 22px; }
.sdui-root.sdui-root .sdui-spinner-md { width: 34px; height: 34px; }
.sdui-root.sdui-root .sdui-spinner-lg { width: 52px; height: 52px; }
.sdui-root.sdui-root .sdui-spinner-track {
  stroke: var(--c-outline-variant);
  stroke-width: 5;
  opacity: 0.45;
}
.sdui-root.sdui-root .sdui-spinner-arc {
  stroke: var(--c-primary);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2, 200;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px var(--c-primary-glow));
  animation: sdui-spin-dash 1.5s ease-in-out infinite;
}
@keyframes sdui-spin-rot { 100% { transform: rotate(360deg); } }
@keyframes sdui-spin-dash {
  0%   { stroke-dasharray: 1, 200;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; }
  100% { stroke-dashoffset: -125px; }
}
@media (prefers-reduced-motion: reduce) {
  /* El sistema manda MIENTRAS la persona no elija otra cosa
     (Configuración → Movimiento). */
  :root:not([data-motion='full']) {
  .sdui-root.sdui-root .sdui-spinner { animation-duration: 6s; }
  .sdui-root.sdui-root .sdui-spinner-arc { animation: none; stroke-dasharray: 60, 200; }
  }
}

/* ---- Dropzone: bahía de carga que se ilumina al recibir ----
   Reposo: trazo discontinuo tenue. Al arrastrar encima: borde vivo,
   halo, fondo teñido y una línea de escaneo que recorre la caja —
   feedback inequívoco de "suelta aquí", que es lo único que importa
   en un dropzone. ---- */
.sdui-root.sdui-root .sdui-fileup-zone {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 2px dashed var(--c-outline-variant);
  background: var(--c-surface-lowest);
  transition: border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .sdui-fileup-zone:hover {
  border-color: var(--c-primary);
  background: var(--c-surface-low);
}
.sdui-root.sdui-root .sdui-fileup-zone.is-dragover {
  border-style: solid;
  border-color: var(--c-primary-bright);
  background: var(--c-primary-container-soft, rgba(var(--c-primary-rgb), 0.10));
  box-shadow: 0 0 22px var(--c-primary-glow), inset 0 0 22px rgba(var(--c-primary-rgb), 0.08);
}
/* Línea de escaneo: solo mientras se arrastra encima. */
.sdui-root.sdui-root .sdui-fileup-zone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-primary-bright), transparent);
  opacity: 0;
  pointer-events: none;
}
.sdui-root.sdui-root .sdui-fileup-zone.is-dragover::after {
  opacity: 1;
  animation: sdui-fileup-scan 1.1s linear infinite;
}
.sdui-root.sdui-root .sdui-fileup-zone.is-dragover .sdui-fileup-icon {
  transform: translateY(-3px) scale(1.12);
  filter: drop-shadow(0 0 10px var(--c-primary-glow));
}
.sdui-root.sdui-root .sdui-fileup-icon {
  font-size: 26px;
  transition: transform var(--t-base) var(--ease-spring), filter var(--t-base) var(--ease-out);
}
.sdui-root.sdui-root .sdui-fileup-text { font-size: 13px; }
/* Cada archivo aceptado, como una ficha de vidrio. */
.sdui-root.sdui-root .sdui-fileup-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 6px 0 0;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: var(--c-glass);
  border: 1px solid var(--c-border-glass);
  font-size: 12px;
  color: var(--c-text);
}
@keyframes sdui-fileup-scan { from { top: -2px; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  /* El sistema manda MIENTRAS la persona no elija otra cosa
     (Configuración → Movimiento). */
  :root:not([data-motion='full']) {
  .sdui-root.sdui-root .sdui-fileup-zone.is-dragover::after { animation: none; }
  .sdui-root.sdui-root .sdui-fileup-icon { transition: none; }
  }
}

/* ============================================================
   10. Chat: burbujas asimétricas (DESIGN §Chat Interface)
   ============================================================ */
/* Ancho de lectura: en desktop una burbuja al 82% cruzaba media pantalla y
   parecía un banner; 65% lee como conversación. En phone sí hace falta ancho. */
.sdui-root.sdui-root .sdui-bubble { max-width: 65%; }
@media (max-width: 899.98px) {
  .sdui-root.sdui-root .sdui-bubble { max-width: 82%; }
}
.sdui-root.sdui-root .sdui-chat-them .sdui-bubble {
  background: var(--c-surface-high);
  border: 1px solid var(--c-border-glass);
  border-left: 4px solid var(--c-primary-bright);
  border-radius: 0 16px 16px 16px;
  color: var(--c-text);
  box-shadow: none;
}
.sdui-root.sdui-root .sdui-chat-mine .sdui-bubble {
  background: linear-gradient(100deg, var(--c-primary-container), var(--c-secondary-container));
  border-radius: 16px 0 16px 16px;
  color: var(--c-on-primary-container, #001a24);
  font-weight: 600;
  box-shadow: 0 0 10px var(--c-primary-glow);
}
/* Autor en cian cristalino micro-caps (DESIGN: metadata de agentes).
   12px (0.26.0): a 10px, con el telefono al sol, el nombre se adivinaba. */
.sdui-root.sdui-root .sdui-bubble-author {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-primary);
  opacity: 0.9;
  margin-bottom: 3px;
}
.sdui-root.sdui-root .sdui-chat-mine .sdui-bubble-author { color: inherit; opacity: 0.6; }
/* La hora acompaña, no protagoniza (pero se lee: 12px, 0.26.0). */
.sdui-root.sdui-root .sdui-bubble-time {
  font-size: 12px;
  letter-spacing: 0.6px;
  opacity: 0.55;
  text-align: right;
  margin-top: 3px;
}
/* Avatar de iniciales: vidrio con filo cian, como los pulse-beacons del sistema. */
.sdui-root.sdui-root .sdui-chat-ava {
  background: var(--c-glass-strong);
  border: 1px solid var(--c-border-glass-strong);
  color: var(--c-primary);
  box-shadow: 0 0 8px var(--c-primary-glow-soft, rgba(var(--c-primary-rgb), 0.18));
}
/* Tablero: cada columna es una superficie de vidrio; la tarjeta levantada
   proyecta el glow cian para que se vea cuál está en el aire. */
.sdui-root.sdui-root .sdui-board-col {
  background: var(--c-glass);
  border: 1px solid var(--c-border-glass);
  backdrop-filter: var(--blur-glass);
}
.sdui-root.sdui-root .sdui-board-col.is-over {
  border-color: var(--c-primary-bright);
  box-shadow: var(--glow-primary);
}
.sdui-root.sdui-root .sdui-board-col-head { color: var(--c-text-cyan); }
.sdui-root.sdui-root .sdui-board-card {
  background: var(--c-surface-container);
  border-color: var(--c-border-glass);
}
.sdui-root.sdui-root .sdui-board-card:hover { border-color: var(--c-primary-bright); }
.sdui-root.sdui-root .sdui-board-card-title { color: var(--c-heading); }
/* Cuerpo de la tarjeta (card.body, motor 0.22): separado del título por un
   hilo tenue, como la zona de metadatos de un expediente. */
.sdui-root.sdui-root .sdui-board-card-body {
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--c-outline-variant) 45%, transparent);
}
.sdui-root.sdui-root .sdui-board-count { color: var(--c-text-muted); }
/* Columna vaciada por el filtro: vidrio discontinuo con filo cian tenue; la
   vacía de verdad (columnEmptyText) queda en texto atenuado sin marco. */
.sdui-root.sdui-root .sdui-board-col-empty { color: var(--c-text-muted); }
.sdui-root.sdui-root .sdui-board-col-empty.is-filtered {
  border-color: var(--c-border-glass);
  background: var(--c-primary-glow-soft);
}
.sdui-root.sdui-root .sdui-board-ghost {
  border-color: var(--c-primary-bright);
  box-shadow: var(--glow-primary-strong);
}
.sdui-root.sdui-root .sdui-board-gap {
  border-color: var(--c-border-glass-strong);
  background: var(--c-primary-glow-soft);
}

/* Separador de día: pastilla de vidrio, no una línea más de texto. */
/* ---- Maestro-detalle a alto completo (split_view, motor 0.18.0) ----
   El componente mide su alto; aqui el host decide su CROMO alrededor, para
   cualquier bandeja (livechat, helpdesk): */
/* la columna raiz reparte gap tambien entre hermanos sin alto (los modales
   cerrados): con eso la pagina se desplazaba 64px sobre el panel. */
.sdui-root.sdui-root > .sdui-col:has(> .sdui-split.is-fill) { row-gap: 0; }
.app-view:has(.sdui-split.is-fill) { padding-bottom: 16px; }
/* el ancho maximo de la vista (1080px) es para leer paginas; una bandeja es
   otra cosa: a 1920px quedaba un tercio vacio a cada lado. */
html[data-device='desktop'] .app-view:has(.sdui-split.is-fill) { max-width: min(1600px, 100%); }
/* con un hilo abierto la mascota caia encima de "Enviar". */
body:has(.sdui-split.is-main-open .sdui-conv) .bob-fab,
body:has(.sdui-split.is-main-open .sdui-conv) .bob-bubble { visibility: hidden; }
/* Telefono con el detalle abierto: borde a borde y sin la nav (se vuelve con ←). */
html[data-device='phone'] body:has(.sdui-split.is-main-open) .fab-nav { display: none; }
/* Telefono con un MODAL o un DRAWER abiertos: la nav flotante (z 992) y la mascota
   (z 985) quedaban encima de la hoja (z 980) y tapaban justo la accion —«Crear el
   caso», «Asignar a…», y en la ficha del helpdesk la caja de escribir y «Guardar
   nota interna»—. Dentro de una hoja no se cambia de seccion; al cerrarla vuelven.
   (0.24.0) La mascota tambien se va: se dejaba por ser "donde mas se pide
   ayuda", pero tapaba el pie fijo de la ficha; vuelve al cerrar la hoja. */
html[data-device='phone'] body:has(.sdui-modal-overlay:not(.sdui-hidden)) .fab-nav,
html[data-device='phone'] body:has(.sdui-drawer-overlay:not(.sdui-hidden)) .fab-nav { display: none; }
html[data-device='phone'] body:has(.sdui-modal-overlay:not(.sdui-hidden)) :is(.bob-fab, .bob-bubble),
html[data-device='phone'] body:has(.sdui-drawer-overlay:not(.sdui-hidden)) :is(.bob-fab, .bob-bubble) { visibility: hidden; }
html[data-device='phone'] .app-view:has(.sdui-split.is-main-open) { padding: 0 0 env(safe-area-inset-bottom, 0px); }
html[data-device='phone'] .sdui-root.sdui-root .sdui-split.is-main-open .sdui-conv {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 10px;
}
html[data-device='phone'] .sdui-root.sdui-root .sdui-split.is-main-open .sdui-bubble { max-width: 88%; }
/* con la IA encendida "Enviar" no hace nada y se comia media fila del aviso. */
html[data-device='phone'] .sdui-root.sdui-root .sdui-conv .sdui-composer.is-disabled .sdui-composer-send { display: none; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-conv .sdui-composer.is-disabled .sdui-composer-input {
  font-size: 14px;
  min-height: calc(2.9em + 20px);
}
/* "Ver mas" de la lista de un maestro-detalle: discreto, no una pastilla de 48px. */
.sdui-root.sdui-root .sdui-split-side .sdui-loadmore-btn { min-height: 34px; padding: 0 14px; font-size: 13px; }
/* 0.26.2: discreto, pero tocable: medido «Ver más» a 34px en el livechat del telefono. */
@media (pointer: coarse), (max-width: 700px) { .sdui-root.sdui-root .sdui-split-side .sdui-loadmore-btn { min-height: var(--sui-touch-min, 44px); } }
html[data-device='desktop'] .sdui-root.sdui-root .sdui-split .sdui-bubble { max-width: 68%; }
/* Bandeja (conversation_list, motor 0.18.0): el vidrio de las listas, con la
   seleccion y el contador en el cian de la marca. */
.sdui-root.sdui-root .sdui-clist { padding: 6px; }
.sdui-root.sdui-root .sdui-clist-row:hover { background: rgba(var(--c-primary-rgb), 0.07); }
.sdui-root.sdui-root .sdui-clist-row.is-selected {
  background: rgba(var(--c-primary-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--c-primary-rgb), 0.3);
}
.sdui-root.sdui-root .sdui-clist-count {
  background: var(--c-primary-container);
  color: var(--c-on-primary);
  box-shadow: 0 0 10px var(--c-primary-glow);
}
.sdui-root.sdui-root .sdui-clist-row.is-highlight .sdui-clist-count { background: var(--c-warn); box-shadow: none; }
.sdui-root.sdui-root .sdui-clist-channel { background: var(--c-surface-container); box-shadow: 0 0 0 2px var(--c-surface-container); }
/* Buscador + selector de la bandeja: cada uno a ancho completo. Con la base
   de 240px (pensada para toolbars anchas) el buscador no llenaba la columna, y
   "Todos los canales" no cabe al lado: el selector bajaba a medio ancho. El
   selector solo aparece con dos canales o mas. */
.sdui-root.sdui-root .sdui-split-side .sdui-row > .sdui-search-group,
.sdui-root.sdui-root .sdui-split-side .sdui-row > .sdui-select-group { flex: 1 1 100%; min-width: 0; }
/* max-width: el selector de filtro trae un tope de 260px para las toolbars. */
.sdui-root.sdui-root .sdui-split-side .sdui-row > .sdui-select-group { max-width: none; }
.sdui-root.sdui-root .sdui-split-side .sdui-row > .sdui-select-group .sui-select { width: 100%; }
/* Los filtros de la bandeja: una fila discreta, no el segmentado de 44px de un formulario. */
.sdui-root.sdui-root .sdui-segmented-block .sdui-seg-btn { min-height: 36px; letter-spacing: 0.2px; }
/* 0.26.2: en el dedo, 44 (--sui-touch-min). Medido: 36 en el livechat del telefono
   y 42 con puntero grueso; el dedo cambiaba el filtro de al lado. */
@media (pointer: coarse), (max-width: 700px) { .sdui-root.sdui-root .sdui-segmented-block .sdui-seg-btn { min-height: var(--sui-touch-min, 44px); } }

/* Ficha de una persona (profile_card, motor 0.18.1): los datos en una
   bandeja de vidrio mas oscura que el modal, para que se lean como bloque. */
.sdui-root.sdui-root .sdui-profile-fields { background: var(--c-surface-low); border-color: var(--c-border-glass); }
.sdui-root.sdui-root .sdui-profile-field + .sdui-profile-field { border-color: var(--c-border-glass); }
.sdui-root.sdui-root .sdui-profile-stat { background: var(--c-surface-low); border: 1px solid var(--c-border-glass); }
.sdui-root.sdui-root .sdui-profile-avatar { box-shadow: 0 0 0 3px var(--c-surface-container), 0 0 18px var(--c-primary-glow-soft); }
/* Hoja inferior (modal sheet, motor 0.18.1): el vidrio del modal, pegado abajo. */
@media (max-width: 640px) {
  .sdui-root.sdui-root .sdui-modal.sdui-modal-sheet {
    max-width: none;
    width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    animation: sdui-hoja-sube 0.28s var(--ease-out) both;
  }
}

/* Aviso del sistema dentro del chat (motor 0.17.31, chat.systemWhen): "IA
   pausada por…". Mismo idioma que el separador de dia, pero en minusculas y
   sin borde: es un hecho de la conversacion, no un corte de fecha. */
.sdui-root.sdui-root .sdui-chat-system {
  background: var(--c-glass);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border-glass);
}
.sdui-root.sdui-root .sdui-chat-day {
  background: var(--c-glass);
  border-color: var(--c-border-glass);
  color: var(--c-text-cyan);
  backdrop-filter: var(--blur-glass);
}
/* Barra de envío: el campo es monocromo oscuro (DESIGN §Input Fields) y el
   botón la CTA capsular con glow. El barrido por tecla usa el cian de marca. */
.sdui-root.sdui-root .sdui-composer-field {
  background: var(--c-input-bg);
  border: 1px solid var(--c-border-glass);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.sdui-root.sdui-root .sdui-composer-field:focus-within {
  border-color: var(--c-primary-bright);
  box-shadow: var(--glow-primary);
}
.sdui-root.sdui-root .sdui-composer-input {
  background: transparent;
  border: 0;
  color: var(--c-text);
  padding: var(--sp-xs) var(--sp-sm);
}
.sdui-root.sdui-root .sdui-composer-input:focus { outline: none; box-shadow: none; }
.sdui-root.sdui-root .sdui-composer-send { border-radius: var(--r-full); }
/* Visor de media: lienzo negro para que la foto mande y las cajas de la IA
   se lean; el cromado es vidrio con filo cian como el resto de capas. */
.sdui-root.sdui-root .sdui-viewer {
  background: var(--c-glass-strong);
  border-color: var(--c-border-glass-strong);
  box-shadow: var(--glow-primary-strong);
  backdrop-filter: var(--blur-glass);
}
.sdui-root.sdui-root .sdui-viewer-stage { background: var(--c-black); }
.sdui-root.sdui-root .sdui-viewer-box { box-shadow: 0 0 10px currentColor; }
.sdui-root.sdui-root .sdui-viewer-chip {
  background: var(--c-glass);
  border-color: var(--c-border-glass);
  color: var(--c-text);
}
.sdui-root.sdui-root .sdui-viewer-chip:hover { border-color: var(--c-primary-bright); }
/* OTP: casillas monocromas que se "encienden" al enfocar. */
.sdui-root.sdui-root .sdui-otp-box {
  background: var(--c-input-bg);
  border: 1px solid var(--c-outline-variant);
  color: var(--c-heading);
  border-radius: var(--r-md);
}
.sdui-root.sdui-root .sdui-otp-box:focus {
  border-color: var(--c-primary-bright);
  box-shadow: var(--glow-primary);
  outline: none;
}

/* ============================================================
   11. Capas flotantes: velo con desenfoque y vidrio fuerte
   ============================================================ */
.sdui-root.sdui-root .sdui-modal-overlay,
.sdui-root.sdui-root .sdui-drawer-overlay,
.sdui-root.sdui-root .sdui-cmdp-overlay,
.sdui-root.sdui-confirm-backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: sdui-skin-fade var(--t-base) var(--ease-out) both;
}
.sdui-root.sdui-root .sdui-modal,
.sdui-root.sdui-root .sdui-drawer-panel,
.sdui-root.sdui-root .sdui-cmdp-box,
.sdui-root.sdui-root .sdui-dropdown-panel,
.sdui-root.sdui-root .sdui-pop-panel,
.sdui-root.sdui-root .sdui-cb-menu,
.sdui-root.sdui-root .sdui-ms-menu,
.sdui-root .sdui-confirm {
  background: var(--c-glass-strong);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-border-glass-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--glow-primary-strong);
  color: var(--c-text);
}
.sdui-root.sdui-root .sdui-modal,
.sdui-root .sdui-confirm { animation: sdui-skin-pop var(--t-slow) var(--ease-spring) both; }
.sdui-root.sdui-root .sdui-drawer-panel { border-radius: var(--r-xl) 0 0 var(--r-xl); }
.sdui-root.sdui-root .sdui-drawer-left .sdui-drawer-panel { border-radius: 0 var(--r-xl) var(--r-xl) 0; }
.sdui-root.sdui-root .sdui-modal-header,
.sdui-root.sdui-root .sdui-modal-footer,
.sdui-root.sdui-root .sdui-drawer-head,
.sdui-root.sdui-root .sdui-drawer-footer { border-color: var(--c-border-glass); }
/* Pie del drawer (0.24.0): OPACO sobre el vidrio del panel —con el desenfoque se
   leia el chat de detras entre los botones—. La esquina redondeada la recorta
   el overflow:hidden del panel. */
.sdui-root.sdui-root .sdui-drawer-footer { background: var(--c-surface, #0d121f); }
.sdui-root.sdui-root .sdui-cmdp-item:hover,
.sdui-root.sdui-root .sdui-cb-opt:hover,
.sdui-root.sdui-root .sdui-ms-opt:hover,
.sdui-root.sdui-root .sdui-tree-row:hover,
.sdui-root.sdui-root .sdui-list-clickable:hover,
.sdui-root.sdui-root .sdui-acc-head:hover { background: var(--c-primary-glow-soft); }
@keyframes sdui-skin-fade { from { opacity: 0; } }
@keyframes sdui-skin-pop { from { opacity: 0; transform: translateY(18px) scale(0.94); } }

/* Drawer: desliza desde su lado (el overlay ya hace el fade). */
.sdui-root.sdui-root .sdui-drawer-right .sdui-drawer-panel {
  animation: sdui-skin-slide-r var(--t-slow) var(--ease-out) both;
}
.sdui-root.sdui-root .sdui-drawer-left .sdui-drawer-panel {
  animation: sdui-skin-slide-l var(--t-slow) var(--ease-out) both;
}
@keyframes sdui-skin-slide-r { from { opacity: 0.4; transform: translateX(48px); } }
@keyframes sdui-skin-slide-l { from { opacity: 0.4; transform: translateX(-48px); } }

/* Menús flotantes (dropdown, popover, combobox, multiselect): pop corto.
   Se re-dispara solo: abren/cierran con display (sdui-hidden). */
.sdui-root.sdui-root .sdui-dropdown-panel,
.sdui-root.sdui-root .sdui-pop-panel,
.sdui-root.sdui-root .sdui-cb-menu,
.sdui-root.sdui-root .sdui-ms-menu {
  animation: sdui-skin-drop var(--t-fast) var(--ease-out) both;
}
@keyframes sdui-skin-drop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }

/* ============================================================
   11b. Coreografía de entrada: la vista se enciende, no aparece
   (DESIGN.md: la UI debe sentirse activa y "viva")
   ============================================================ */
/* Panel de pestaña: se re-anima en cada cambio de tab (display:none → block
   re-dispara la animación; los paneles son lazy y alternan con .sdui-hidden). */
.sdui-root.sdui-root .sdui-tab-panel {
  animation: sdui-skin-rise var(--t-slow) var(--ease-out) both;
}
@keyframes sdui-skin-rise { from { opacity: 0; transform: translateY(10px); } }

/* Secciones y tiles: entrada escalonada sutil dentro del panel activo. */
.sdui-root.sdui-root .sdui-tab-panel .sui-card,
.sdui-root.sdui-root .sdui-tab-panel .sdui-stat {
  animation: sdui-skin-rise var(--t-slow) var(--ease-out) both;
}
.sdui-root.sdui-root .sdui-tab-panel .sdui-grid > :nth-child(1) { animation-delay: 0.03s; }
.sdui-root.sdui-root .sdui-tab-panel .sdui-grid > :nth-child(2) { animation-delay: 0.09s; }
.sdui-root.sdui-root .sdui-tab-panel .sdui-grid > :nth-child(3) { animation-delay: 0.15s; }
.sdui-root.sdui-root .sdui-tab-panel .sdui-grid > :nth-child(4) { animation-delay: 0.21s; }
.sdui-root.sdui-root .sdui-tab-panel .sdui-grid > :nth-child(n+5) { animation-delay: 0.27s; }

/* El KPI que manda respira: pulso de glow lento (Pulse Beacon del DESIGN.md). */
.sdui-root.sdui-root .sdui-stat-primary {
  animation: sdui-skin-rise var(--t-slow) var(--ease-out) both,
             sdui-skin-breathe 3.2s var(--ease-out) 1s infinite;
}
@keyframes sdui-skin-breathe {
  0%, 100% { box-shadow: 0 0 12px var(--c-primary-glow-soft); }
  50% { box-shadow: 0 0 22px var(--c-primary-glow); }
}

/* La confirmación se monta en <body>, pero el motor le cuelga .sdui-root encima:
   por eso basta con anidar bajo esa clase. */
.sdui-root .sdui-confirm-title { color: var(--c-heading, #fff); letter-spacing: 0.5px; }
.sdui-root .sdui-confirm-text { color: var(--c-text-muted); }
.sdui-root .sdui-confirm-danger { border-top: 3px solid var(--c-error); }

/* ============================================================
   12. Vacío, carga y avisos
   ============================================================ */
.sdui-root.sdui-root .sdui-empty-icon {
  filter: drop-shadow(0 0 12px var(--c-primary-glow));
}
.sdui-root.sdui-root .sdui-empty-title { color: var(--c-heading, #fff); font-weight: 800; }
.sdui-root.sdui-root .sdui-spinner {
  border-color: var(--c-surface-highest);
  border-top-color: var(--c-primary-bright);
}
.sdui-root.sdui-root .sdui-skel-line,
.sdui-root.sdui-root .sdui-skel-block,
.sdui-root.sdui-root .sdui-skel-circle {
  background: linear-gradient(90deg, var(--c-surface-low) 25%, var(--c-surface-high) 50%, var(--c-surface-low) 75%);
  background-size: 200% 100%;
}
.sdui-root.sdui-root .sdui-alert { border-radius: var(--r-lg); }
.sdui-root.sdui-root .sdui-alert-info {
  background: var(--c-primary-glow-soft);
  border-color: var(--c-border-glass);
  color: var(--c-primary);
}
.sdui-root.sdui-root .sdui-link { color: var(--c-primary); }

/* ============================================================
   13. Móvil primero: el módulo cabe en un pulgar
   ============================================================ */

/* Higiene de grid: un hijo de grid tiene min-width:auto — no puede encoger
   por debajo del min-content de su contenido, así que una tabla ancha REVIENTA
   el track y toda la página scrollea lateral (helpdesk PC: card de 809px
   saliéndose a 1387px en viewport de 1280). Con min-width:0 el hijo encoge y
   el scroll queda DENTRO del .sdui-table-wrap (overflow-x:auto), que para eso
   está. */
.sdui-root.sdui-root .sdui-grid > * { min-width: 0; }

/* Tabs en pantallas angostas: la fila de pestañas (helpdesk 7 tabs, showcase)
   media más ancho que el viewport y arrastraba TODO el layout a desbordar
   (auditoría: 699px en una pantalla de 390). Patrón móvil estándar: fila fija
   con scroll horizontal propio, barra oculta. Breakpoint = el estructural del
   kernel (--bp-phone-max, ver tokens.css / ADR 0002). */
@media (max-width: 899.98px) {
  .sdui-root.sdui-root .sdui-tabs-wrap { max-width: 100%; min-width: 0; }
  .sdui-root.sdui-root .sdui-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sdui-root.sdui-root .sdui-tabs::-webkit-scrollbar { display: none; }
  .sdui-root.sdui-root .sui-tab { flex: 0 0 auto; white-space: nowrap; }
  /* La señal de "sigue": el motor marca hacia donde quedan pestañas
     (data-more, 0.17.30) y ese borde se desvanece. Sin ella, una pestaña
     cortada ("PLANTILL") se leia como el final de la barra. */
  .sdui-root.sdui-root .sdui-tabs[data-more='end'] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
  .sdui-root.sdui-root .sdui-tabs[data-more='start'] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
  }
  .sdui-root.sdui-root .sdui-tabs[data-more='both'] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  }
}

@media (max-width: 640px) {
  .sdui-root.sdui-root .sdui-card-footer .sui-btn { width: 100%; }
  .sdui-root.sdui-root .sui-card { padding: var(--sp-sm); border-radius: var(--r-lg); }
  .sdui-root.sdui-root .sdui-data-card-tiles { grid-template-columns: repeat(2, 1fr); }
  .sdui-root.sdui-root .sdui-toolbar,
  .sdui-root.sdui-root .sdui-toolbar-bar { gap: var(--sp-xs); }
  .sdui-root.sdui-root .sdui-search-group { flex: 1 1 100%; }
}

/* ---- Telefono: el encabezado de la vista no se come la primera pantalla ----
   Medido en 10 modulos a 393px: de 133 a 282px de encabezado antes del primer
   dato. "Refrescar" ocupaba una fila entera (48px, el boton a todo lo ancho) y
   la descripcion llegaba a 5 lineas. Ahora la descripcion va a dos lineas (se
   abre tocandola, motor 0.17.30) y las insignias y las acciones comparten
   fila, con el boton a su tamaño. */
@media (max-width: 640px) {
  .sdui-root.sdui-root .sdui-page-header { gap: 8px 10px; align-items: center; padding-bottom: var(--sp-sm); }
  .sdui-root.sdui-root .sdui-ph-main { flex: 1 1 100%; }
  .sdui-root.sdui-root .sdui-ph-subtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    cursor: pointer;
  }
  .sdui-root.sdui-root .sdui-ph-subtitle.is-open { display: block; -webkit-line-clamp: unset; line-clamp: none; }
  .sdui-root.sdui-root .sdui-ph-badges { flex: 1 1 auto; padding-top: 0; }
  .sdui-root.sdui-root .sdui-ph-actions { flex: 0 0 auto; width: auto; margin-left: auto; gap: 6px; }
  /* 0.26.1: a 44 (--sui-touch-min). Medido: «Refrescar» 40px de alto. */
  .sdui-root.sdui-root .sdui-ph-actions .sui-btn { width: auto; min-height: var(--sui-touch-min, 44px); padding: 0 14px; }

  /* Tarjetas de numero de dos en dos (el motor marca .sdui-grid-stats, 0.17.30):
     una cifra no necesita el ancho entero y una por fila eran 644px para cuatro.
     El colapso a una columna del motor es !important; este lo es tambien, con
     mas especificidad. Si quedan impares, la ultima ocupa la fila entera. */
  .sdui-root.sdui-root .sdui-grid.sdui-grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .sdui-root.sdui-root .sdui-grid-stats > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  .sdui-root.sdui-root .sdui-grid-stats .sdui-stat { padding: 12px; }
  .sdui-root.sdui-root .sdui-grid-stats .sdui-stat-head { gap: 8px; }
  .sdui-root.sdui-root .sdui-grid-stats .sdui-stat-icon { width: 28px; height: 28px; font-size: .85rem; }
  .sdui-root.sdui-root .sdui-grid-stats .sdui-stat-label { letter-spacing: 1px; overflow-wrap: anywhere; }
  .sdui-root.sdui-root .sdui-grid-stats .sdui-stat-value { font-size: 1.6rem; }
}

/* ============================================================
   14. Menos movimiento = ninguna coreografía
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* El sistema manda MIENTRAS la persona no elija otra cosa
     (Configuración → Movimiento). */
  :root:not([data-motion='full']) {
  .sdui-root.sdui-root .sdui-status-ok .sdui-status-dot::after { animation: none; opacity: 0; }
  .sdui-root.sdui-root .sdui-modal,
  .sdui-root .sdui-confirm,
  .sdui-root.sdui-confirm-backdrop,
  .sdui-root.sdui-root .sdui-tab-panel,
  .sdui-root.sdui-root .sdui-tab-panel .sui-card,
  .sdui-root.sdui-root .sdui-tab-panel .sdui-stat,
  .sdui-root.sdui-root .sdui-stat-primary,
  .sdui-root.sdui-root .sdui-drawer-panel,
  .sdui-root.sdui-root .sdui-dropdown-panel,
  .sdui-root.sdui-root .sdui-pop-panel,
  .sdui-root.sdui-root .sdui-cb-menu,
  .sdui-root.sdui-root .sdui-ms-menu { animation: none !important; }
  /* Tarjetas enlace (0.21.0): la luz cambia, la tarjeta no se mueve. */
  .sdui-root.sdui-root .sdui-stat.sdui-is-link,
  .sdui-root.sdui-root .sui-card.sdui-is-link,
  .sdui-root.sdui-root .sdui-link-arrow { transition: none; }
  .sdui-root.sdui-root .sdui-stat.sdui-is-link:active,
  .sdui-root.sdui-root .sui-card.sdui-is-link:active,
  .sdui-root.sdui-root .sdui-is-link:hover .sdui-link-arrow { transform: none; }
  }
}

/* ============================================================
   15. Modo claro: los pocos valores del skin que no salen de tokens
   ============================================================ */
:root[data-theme='light'] .sdui-root.sdui-root .sui-card.sdui-card-subtle {
  background: rgba(226, 232, 240, 0.6);
}
:root[data-theme='light'] .sdui-root.sdui-root .sdui-tile {
  background: rgba(226, 232, 240, 0.75);
}
:root[data-theme='light'] .sdui-root.sdui-root .sui-btn-secondary {
  background: rgba(var(--c-primary-rgb), 0.08);
  color: var(--c-heading);
  border-color: rgba(var(--c-primary-rgb), 0.35);
}
:root[data-theme='light'] .sdui-root.sdui-root .sui-btn-secondary:hover {
  background: rgba(var(--c-primary-rgb), 0.14);
  border-color: rgba(var(--c-primary-rgb), 0.55);
}

/* Tamaños del drawer (motor >=0.17.1): un detalle denso no cabe en la anchura
   de un panel de filtros. En movil los tres ocupan el ancho completo. */
.sdui-root.sdui-root .sdui-drawer-panel.sdui-drawer-lg { width: min(640px, 96vw); }
.sdui-root.sdui-root .sdui-drawer-panel.sdui-drawer-xl { width: min(860px, 96vw); }

/* Pantalla completa del drawer (motor >=0.17.3): el ancho manda sobre el size. */
.sdui-root.sdui-root .sdui-drawer-panel.sdui-drawer-full {
  /* `100%` del overlay (que es `inset: 0`), NO `100vw`: los vw incluyen el
     ancho de la barra de scroll, así que el panel salía unos píxeles más
     ancho que lo visible y asomaba el fondo oscurecido por el otro lado.
     Y sin la sombra lateral, que a pantalla completa se veía como una
     costura vertical sobre el borde de la pantalla. */
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* En una pantalla estrecha el drawer YA ocupa el 96% del ancho: "pantalla
   completa" no tiene nada que dar y el boton parece roto ("le doy y no pasa
   nada"). Se oculta; el estado sigue existiendo para quien lo tenga puesto. */
@media (max-width: 700px) {
  .sdui-root.sdui-root .sdui-drawer-expand { display: none; }
}

/* ============================================================
   La ficha en un TELEFONO (2026-09-01)
   ============================================================ */
@media (max-width: 700px) {
  /* La cabecera del drawer reparte una sola linea entre titulo, chips y
     botones: con cuatro chips el titulo se encogia hasta desaparecer — de
     "ATC-034 · Filtracion de aguas servidas..." quedaba el punto. El titulo
     manda y ocupa su linea; los chips bajan a la siguiente. */
  .sdui-root.sdui-root .sdui-drawer-head { flex-wrap: wrap; row-gap: .5rem; }
  .sdui-root.sdui-root .sdui-drawer-title,
  .sdui-root.sdui-root .sdui-drawer-title.has-badges {
    /* base 0: el titulo se queda con el hueco que sobra y parte SUS lineas,
       en vez de empujar los botones a una fila propia. */
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }
  .sdui-root.sdui-root .sdui-drawer-badges { order: 3; flex: 1 1 100%; }
  .sdui-root.sdui-root .sdui-drawer-x { order: 2; }

  /* Los pasos se apilan cuando no caben, y la linea que los une se queda
     colgando en el aire apuntando a nada. Sin linea: las pildoras solas ya
     se leen como pasos. */
  .sdui-root.sdui-root .sdui-step-line { display: none; }
  .sdui-root.sdui-root .sdui-steps { gap: .4rem; flex-wrap: wrap; }

  /* UTILIDAD: lo que sobra en la mano. Un chip de categoria o un titulo que
     ya esta en la cabecera ocupan, en un telefono, una pantalla que hace
     falta para el contenido. Que sobra lo decide el modulo (className), no
     el motor: en escritorio sigue estando. */
  .sdui-root.sdui-root .sdui-hide-phone { display: none !important; }
}

/* ============================================================
   Lista dentro de una tarjeta, en el telefono (motor 0.18.4)
   ============================================================
   Una `list` ya es vidrio con borde y esquinas; dentro de una tarjeta eran
   dos cajas, y cada marco se come ancho que en 390px no sobra (la lista se
   quedaba con 314 de 375). En el telefono la lista se funde con su tarjeta:
   las filas quedan alineadas con el resto del contenido y separadas solo por
   su linea, como la bandeja del livechat. En escritorio no cambia. */
html[data-device="phone"] .sdui-root.sdui-root .sui-card .sdui-list {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-device="phone"] .sdui-root.sdui-root .sui-card .sdui-list-row { padding-inline: 0; }

/* ============================================================
   Telefono (motor 0.19.0 / 0.19.5): la cabecera es solo el titulo,
   centrado, con flechas a las secciones vecinas; y las secciones
   tambien van en el boton de abajo a la derecha
   ============================================================ */
/* El titulo de la vista, pequeño y sin descripcion ni insignias: arriba ya
   esta la barra del panel, y la cabecera se comia hasta 280px antes del
   primer dato. Centrado entre las dos flechas de seccion (0.19.5), que dicen a
   donde llevan; debajo del titulo, la seccion en la que se esta. Las acciones
   de la cabecera bajan a una fila propia, centradas. */
html[data-device='phone'] .sdui-root.sdui-root .sdui-page-header {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr) 0;
  grid-template-areas: "ant main sig" "acc acc acc";
  align-items: center; gap: 6px 0;
  padding-bottom: 8px; margin-bottom: 4px; border-bottom: 0;
}
/* Con secciones, dos filas: el nombre del modulo arriba a todo lo ancho (en
   una sola fila con las flechas quedaba "BASE DE CONOCI..." a 390px) y debajo
   anterior · actual · siguiente. */
html[data-device='phone'] .sdui-root.sdui-root .sdui-page-header.sdui-ph-con-secciones {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "tit tit tit" "ant main sig" "acc acc acc";
  row-gap: 0; column-gap: 8px;
}
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-con-secciones .sdui-ph-main { display: contents; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-con-secciones .sdui-ph-seccion { grid-area: main; min-width: 0; margin: 0; text-align: center; }
/* Los nombres que viajan al cambiar de seccion no deben asomar fuera de la cabecera. */
html[data-device='phone'] .sdui-root.sdui-root .sdui-page-header.sdui-ph-con-secciones { overflow-x: clip; overflow-y: visible; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-main { grid-area: main; min-width: 0; text-align: center; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-flecha-ant { grid-area: ant; justify-self: start; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-flecha-sig { grid-area: sig; justify-self: end; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-actions { grid-area: acc; justify-self: center; margin: 0; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-title {
  font-size: 15px; letter-spacing: 1.4px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: none;
}
/* Con secciones, el titulo del modulo pasa a rotulo y manda la seccion. */
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-con-secciones .sdui-ph-title {
  grid-area: tit; text-align: center;
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.1;
  color: var(--sui-muted-strong);
}
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-seccion { font-size: 15px; letter-spacing: 0.3px; line-height: 1.2; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-flecha { color: var(--c-text); }
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-subtitle,
html[data-device='phone'] .sdui-root.sdui-root .sdui-ph-badges { display: none; }
/* La barra de pestañas sobra cuando el panel ya ofrece las secciones en su
   boton (el panel marca html[data-host-secciones="1"] al recibirlas). Un host
   que no las ofrezca no lo marca y la barra se queda. */
html[data-device='phone'][data-host-secciones='1'] .sdui-root.sdui-root .sui-tabs[data-secciones='1'],
html[data-device='phone'][data-host-secciones='1'] .sdui-root.sdui-root .sdui-tabs[data-secciones='1'] { display: none; }
/* El boton de filtros, a la medida del dedo y del resto de botones.
   0.26.1: 44 (--sui-touch-min); medido «Filtros» a 42px. */
html[data-device='phone'] .sdui-root.sdui-root .sdui-tb-plegable > .sdui-tb-right { align-items: center; gap: 8px; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-tb-plegable > .sdui-tb-right > .sui-btn,
html[data-device='phone'] .sdui-root.sdui-root .sdui-tb-filtros { min-height: var(--sui-touch-min, 44px); height: var(--sui-touch-min, 44px); padding: 0 16px; width: auto; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-tb-filtros.is-activo { border-color: var(--c-primary-container); }
/* Toolbar en el telefono (motor 0.25.0): el buscador ya no se pliega, va en su
   franja a todo lo ancho y a la medida del dedo; los botones y los modos que
   la izquierda declara se quedan a la vista junto a «Filtros». */
html[data-device='phone'] .sdui-root.sdui-root .sdui-tb-plegable > .sdui-tb-search .sui-input { min-height: 44px; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-tb-plegable > .sdui-tb-fijos { gap: 8px; align-items: center; }
html[data-device='phone'] .sdui-root.sdui-root .sdui-tb-plegable > .sdui-tb-fijos > .sui-btn { min-height: var(--sui-touch-min, 44px); }
/* Barra de secciones de una ficha en el telefono (0.26.1): el motor la compacta a
   ~45px; aqui, sin mayusculas espaciadas —«CONVERSACIÓN» media 176px y cuatro
   secciones cortas no cabian en 372—. Sigue siendo la pildora de la marca. */
@media (max-width: 700px) {
  .sdui-root.sdui-root .sdui-ficha-secciones > .sdui-tabs { gap: 0; }
  .sdui-root.sdui-root .sdui-ficha-secciones > .sdui-tabs .sdui-tab-btn {
    min-height: var(--sui-touch-min, 44px);
    padding: 0 8px;
    gap: 4px;
    font-size: 12px;
    letter-spacing: 0.2px;
    text-transform: none;
  }
}

/* ============================================================
   Fichas en el telefono (motor 0.26.0)
   ============================================================ */
/* Escala del telefono: el motor pone los suelos (12px metadatos, 13px
   etiquetas y ayudas, kv 12/15); aqui solo lo que la skin agrandaba o
   achicaba por encima de ellos. El valor de un kv en blanco de titular: es
   el dato, la clave es el rotulo. */
@media (max-width: 700px) {
  .sdui-root.sdui-root .sdui-kv-label { font-size: 12px; }
  .sdui-root.sdui-root .sdui-kv-value { font-size: 15px; color: var(--c-heading, #fff); }
  .sdui-root.sdui-root .sdui-help,
  .sdui-root.sdui-root p.sdui-muted { font-size: 13px; line-height: 1.45; }
}
/* Barra de secciones de la ficha (drawer/modal sections): pegada arriba del
   cuerpo, OPACA como el pie de 0.24 — con el vidrio se leia entre las
   pestañas lo que pasaba por debajo. */
.sdui-root.sdui-root .sdui-ficha-secciones > .sdui-tabs {
  background: var(--c-surface, #0d121f);
  border-bottom-color: var(--c-border-glass);
}

/* ── Botones con TONO: sólidos, vivos, texto blanco ─────────────────────────
   Primer intento: el tono pintaba el CONTENEDOR del estado (el verde apagado
   de una alerta). Se vio en la calle y no servía: un contenedor está hecho
   para llevar texto encima en una tarjeta, no para ser un botón que se
   encuentra de un vistazo con el teléfono al sol. Ahora el tono de un BOTÓN
   tiene su propio color —saturado, opaco, sin degradado y sin resplandor— con
   texto blanco encima, y es el mismo en claro y en oscuro: lo que salva la
   lectura al aire libre es el contraste, y un pastel no lo da.
   Los cuatro pasan AA (4.5:1) sobre blanco; están elegidos por eso y no por
   gusto: verde 5.0, azul 6.6, ámbar 5.0, rojo 6.4.
   Sigue decidiendo el host: el módulo declara la INTENCIÓN («esto cierra el
   trabajo», «esto avisa») y el panel elige el color. Ese es el reparto. */
/* ESPECIFICIDAD, a propósito alta. El tema claro viste `.sui-btn-secondary` con
   `:root[data-theme='light'] .sdui-root.sdui-root .sui-btn-secondary` (0,5,0),
   y un botón sin `variant` ES secundario: en claro, el tono perdía y «Hecho»
   salía pálido y con texto oscuro (visto en el teléfono de Comando, 0.29.0).
   Con `:root:root` (0,6,0) el tono gana también al :hover del claro, que empata
   y va antes en el fichero. Un botón con tono dice qué SIGNIFICA; eso pesa más
   que el tema. */
:root:root .sdui-root.sdui-root .sui-btn[data-tone="success"],
:root:root .sdui-root.sdui-root .sui-btn[data-tone="info"],
:root:root .sdui-root.sdui-root .sui-btn[data-tone="warning"],
:root:root .sdui-root.sdui-root .sui-btn[data-tone="critical"],
:root:root .sdui-root.sdui-root .sui-btn-danger {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
  text-shadow: none;
}
:root:root .sdui-root.sdui-root .sui-btn[data-tone="success"] { background: var(--c-btn-ok); }
:root:root .sdui-root.sdui-root .sui-btn[data-tone="info"] { background: var(--c-btn-info); }
:root:root .sdui-root.sdui-root .sui-btn[data-tone="warning"] { background: var(--c-btn-warn); }
:root:root .sdui-root.sdui-root .sui-btn[data-tone="critical"],
:root:root .sdui-root.sdui-root .sui-btn-danger { background: var(--c-btn-critical); }
:root:root .sdui-root.sdui-root .sui-btn[data-tone]:hover { filter: brightness(1.12); }
:root:root .sdui-root.sdui-root .sui-btn[data-tone]:active { filter: brightness(0.92); }
/* El icono de dentro también va en blanco: un emoji monocromo heredaba el
   color del texto del tema y salía gris sobre el color. */
:root:root .sdui-root.sdui-root .sui-btn[data-tone] .sui-btn-icon,
:root:root .sdui-root.sdui-root .sui-btn[data-tone] svg { color: #fff; fill: currentColor; }
/* El tono manda sobre la variante y sobre `prominence`: quien declara que un
   botón es «success» está diciendo qué SIGNIFICA, y eso pesa más que cuánto
   quiere que resalte. Sin esto, el degradado del primario ganaba por orden.
   `prominence:"max"` sube el cuerpo, no el color: más alto y más contundente. */
:root:root .sdui-root.sdui-root .sui-btn[data-tone][data-prominence="max"] {
  min-height: 54px;
  font-size: 15px;
  font-weight: 700;
}

/* ── Campo de subida compacto: un botón redondo en una barra de acciones ────
   El motor (≥0.29) ya lo deja sin etiqueta ni pista; aquí se le da cuerpo. Se
   repite el tamaño que fija el motor porque las reglas del panel para .sui-btn
   tienen más especificidad y ganaban con su min-height de píldora. */
.sdui-root.sdui-root .sdui-imgfield-pick-compacto {
  width: 76px;
  height: 76px;
  min-height: 76px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
}
.sdui-root.sdui-root .sdui-imgfield-pick-xl {
  width: 108px;
  height: 108px;
  min-height: 108px;
  font-size: 2.8rem;
}
/* El principal de la barra respira: un halo que lo separa de sus vecinos sin
   necesidad de un texto que diga «este es el grande». */
.sdui-root.sdui-root .sdui-imgfield-pick-xl[data-tone] {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
}
.sdui-root.sdui-root .sdui-imgfield-pick-compacto.sdui-imgfield-busy { opacity: 0.55; }

/* ── Dock (motor 0.31): acciones flotantes en la zona del pulgar ───────────
   Cristal oscuro con borde cian encendido, como el resto de superficies
   Cyber-Municipal; el principal lleva resplandor y un pulso de baliza para que
   se encuentre sin leer. Todo aquí: otro host lo pinta sobrio y el contrato se
   cumple igual. */
.sdui-root.sdui-root .sdui-dock {
  gap: 14px;
  padding: 8px 14px;
  background: rgba(13, 18, 31, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--c-border-glass);
  box-shadow: 0 0 18px rgba(var(--c-primary-rgb), 0.28), 0 12px 32px rgba(0, 0, 0, 0.45),
              inset 0 0 14px rgba(var(--c-primary-rgb), 0.12);
  animation: sdui-dock-entra 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
:root[data-theme='light'] .sdui-root.sdui-root .sdui-dock {
  background: rgba(248, 250, 253, 0.8);
  box-shadow: 0 0 16px rgba(var(--c-primary-rgb), 0.22), 0 10px 26px rgba(15, 23, 42, 0.18);
}
@keyframes sdui-dock-entra {
  from { transform: translate(-50%, 140%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.sdui-root.sdui-root .sdui-dock .sdui-imgfield-pick-compacto {
  width: 58px; height: 58px; min-height: 58px; font-size: 1.55rem;
}
.sdui-root.sdui-root .sdui-dock .sdui-dock-primary .sdui-imgfield-pick-compacto {
  width: 76px; height: 76px; min-height: 76px; font-size: 2.1rem;
}
.sdui-root.sdui-root .sdui-dock .sdui-dock-primary :is(.sui-btn, .sdui-imgfield-pick-compacto) { position: relative; }
/* Resplandor + baliza del principal. Con `:root:root` para ganarle al
   `box-shadow: none` de los botones con tono (0,6,0), que va antes. */
:root:root .sdui-root.sdui-root .sdui-dock .sdui-dock-primary :is(.sui-btn, .sdui-imgfield-pick-compacto) {
  box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), 0.2), 0 0 24px rgba(var(--c-primary-rgb), 0.6);
}
.sdui-root.sdui-root .sdui-dock .sdui-dock-primary :is(.sui-btn, .sdui-imgfield-pick-compacto)::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 2px solid rgba(var(--c-primary-rgb), 0.6);
  pointer-events: none;
  animation: sdui-dock-baliza 2.4s ease-out infinite;
}
/* Ocupado (busyWhile): el pulso se detiene y el dock se atenúa, pero no se
   esconde — esconder lo que el pulgar acaba de pulsar se lee como «no pasó
   nada». */
.sdui-root.sdui-root .sdui-dock[aria-busy='true'] { opacity: 0.7; }
.sdui-root.sdui-root .sdui-dock[aria-busy='true'] .sdui-dock-primary :is(.sui-btn, .sdui-imgfield-pick-compacto)::after { animation: none; opacity: 0; }
.sdui-root.sdui-root .sdui-dock :is(.sui-btn, .sdui-imgfield-pick-compacto):active { transform: scale(0.93); }
@media (prefers-reduced-motion: reduce) {
  .sdui-root.sdui-root .sdui-dock { animation: none; }
  .sdui-root.sdui-root .sdui-dock .sdui-dock-primary :is(.sui-btn, .sdui-imgfield-pick-compacto)::after { animation: none; opacity: 0; }
}
/* CONVIVENCIA. Mientras haya un dock a la vista, la zona de abajo es suya: el
   contenido deja sitio (--sui-float-zone) y, en el teléfono, se apartan el
   botón de secciones y la mascota, que caían justo debajo. La casa sigue: en
   una vista normal es la única salida. */
/* 140: el principal mide 78 + canto 7 + relleno 16 + 14 de margen, y la última
   línea tiene que quedar ENCIMA con aire, no rozando el borde del dock. */
:root:has(.sdui-dock:not(.sdui-hidden)) { --sui-float-zone: 140px; }
html[data-device='phone'] body:has(.sdui-dock:not(.sdui-hidden)) :is(.fab-secciones, .bob-fab, .bob-bubble) { visibility: hidden; }

/* ── Dock «mando de juego» (motor 0.32; pulido 2026-09-22) ─────────────────
   Pedido de Comando: «métele como UI de juegos de Android». Primera versión: un
   canto de tecla con sombra gris dura y un degradado con borde. En el teléfono
   se veía SUCIO: la sombra gris parecía una mancha pegada debajo, y arriba salía
   una franja oscura — el degradado se repetía dentro del borde (su
   `background-origin` era el padding) y lo que asomaba era su final oscuro.
   Ahora: sin borde, degradado desde el borde exterior como un reflejo arriba, y
   en vez del canto gris una sombra suave DEL COLOR del botón, que es lo que hace
   que parezca que flota. Revisado en Chromium, claro y oscuro, antes de subir. */
:root:root .sdui-root.sdui-root .sdui-dock :is(.sui-btn, .sdui-imgfield-pick-compacto) {
  --dock-sombra: rgba(29, 78, 216, 0.5);
  width: 58px;
  height: 58px;
  min-height: 58px;
  min-width: 58px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.55rem;
  line-height: 1;
  border: 0;
  background-origin: border-box;
  background-image: radial-gradient(120% 95% at 50% 12%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.14) 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.14), 0 7px 16px -5px var(--dock-sombra);
  text-shadow: none;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.12s;
}
:root:root .sdui-root.sdui-root .sdui-dock :is(.sui-btn, .sdui-imgfield-pick-compacto)[data-tone='success'] { --dock-sombra: rgba(21, 128, 61, 0.5); }
:root:root .sdui-root.sdui-root .sdui-dock :is(.sui-btn, .sdui-imgfield-pick-compacto)[data-tone='warning'] { --dock-sombra: rgba(234, 88, 12, 0.55); }
:root:root .sdui-root.sdui-root .sdui-dock :is(.sui-btn, .sdui-imgfield-pick-compacto)[data-tone='critical'] { --dock-sombra: rgba(185, 28, 28, 0.5); }
/* El principal: más grande, más sombra y un halo fino. La baliza (::after) sigue. */
:root:root .sdui-root.sdui-root .sdui-dock .sdui-dock-primary :is(.sui-btn, .sdui-imgfield-pick-compacto) {
  width: 78px;
  height: 78px;
  min-height: 78px;
  min-width: 78px;
  font-size: 2.15rem;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.14), 0 10px 22px -6px var(--dock-sombra), 0 0 0 5px rgba(var(--c-primary-rgb), 0.16);
}
.sdui-root.sdui-root .sdui-dock .sdui-dock-primary :is(.sui-btn, .sdui-imgfield-pick-compacto)::after {
  inset: -5px;
  border-width: 1.5px;
  border-color: rgba(var(--c-primary-rgb), 0.45);
}
@keyframes sdui-dock-baliza {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(1.32); opacity: 0; }
}
/* Pulsar: baja un poco y la sombra se recoge, como un botón que se aprieta. */
:root:root .sdui-root.sdui-root .sdui-dock :is(.sui-btn, .sdui-imgfield-pick-compacto):active {
  transform: translateY(2px) scale(0.97);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 3px 8px -3px var(--dock-sombra);
  filter: brightness(1.08);
}
@media (prefers-reduced-motion: reduce) {
  :root:root .sdui-root.sdui-root .sdui-dock :is(.sui-btn, .sdui-imgfield-pick-compacto) { transition: none; }
}
/* En el dock el aviso no lleva texto, solo su icono: puede ser un naranja vivo.
   El ámbar oscuro de los botones con texto (elegido por contraste AA) salía
   café con la sombra de tecla encima. */
:root:root .sdui-root.sdui-root .sdui-dock :is(.sui-btn, .sdui-imgfield-pick-compacto)[data-tone='warning'] {
  background-color: #f97316;
}

/* ── El dibujo del pack sobre un botón de COLOR: borde de sticker (0.34) ─────
   Un pack ilustrado (Maneirito, 3D, Color, Noto) trae sus propios colores, y
   sobre el fondo sólido de un botón con tono se lava: el crema del megáfono de
   Maneirito sobre el naranja del dock, el azul marino del micro sobre el azul.
   Un contorno blanco lo despega de cualquier fondo, y es literalmente de donde
   salió Maneirito: sus stickers. Los packs de máscara (Neón, Sólido, Duotono)
   no lo necesitan, se tiñen de blanco con el texto. */
:root:root .sdui-root.sdui-root .sui-btn[data-tone] .sdui-icon-pack > img,
:root:root .sdui-root.sdui-root .sdui-dock .sdui-icon-pack > img {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}
/* En el dock el dibujo es el botón: más grande que en una etiqueta. */
:root:root .sdui-root.sdui-root .sdui-dock .sdui-icon-pack { width: 1.45em; height: 1.45em; }

/* ── Tecla con TEXTO (motor 0.37.0) ──────────────────────────────────────────
   Pedido del dueño (25-sep): cada tecla dice lo que hace. La redonda de 58 px
   no tiene sitio para «Añadir funcionario»: la tecla
   con rótulo es una pastilla de esquinas grandes, icono arriba y el texto debajo
   a dos líneas, del MISMO alto que la redonda (la zona del pulgar no crece).
   Las teclas sin texto siguen redondas: un dock puede mezclarlas. */
:root:root .sdui-root.sdui-root .sdui-dock :is(.sui-btn, .sdui-imgfield-pick-compacto).has-label {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: auto;
  height: auto;
  min-width: 76px;
  max-width: 112px;
  min-height: 60px;
  padding: 7px 10px 6px;
  border-radius: 20px;
  font-size: 1.25rem;
  line-height: 1;
  white-space: normal;
}
:root:root .sdui-root.sdui-root .sdui-dock .sdui-dock-primary :is(.sui-btn, .sdui-imgfield-pick-compacto).has-label {
  min-width: 92px;
  min-height: 74px;
  border-radius: 24px;
  font-size: 1.6rem;
}
.sdui-root.sdui-root .sdui-dock .sdui-dock-primary :is(.sui-btn, .sdui-imgfield-pick-compacto).has-label::after { border-radius: 28px; }
.sdui-root.sdui-root .sdui-dock .sdui-dock-lbl {
  font-family: var(--sui-font, inherit);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: none;
  text-shadow: none;
}
.sdui-root.sdui-root .sdui-dock .sdui-dock-primary .sdui-dock-lbl { font-size: 0.72rem; }
/* La tecla PRIMARIA sin tono conserva el degradado de marca bajo el reflejo:
   el `background-image` del mando pisaba el degradado del botón primario y la
   tecla salía gris con el texto oscuro encima (se notó al ponerle texto). */
:root:root .sdui-root.sdui-root .sdui-dock .sui-btn-primary:not([data-tone]) {
  background-image: radial-gradient(120% 95% at 50% 12%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.14) 100%),
                    linear-gradient(100deg, var(--c-primary-container), var(--c-secondary-container));
  color: var(--c-on-primary-container, #001a24);
}
/* Con texto el dock reparte: tres pastillas caben en 390 px sin apretarse. */
.sdui-root.sdui-root .sdui-dock:has(.has-label) { gap: 10px; padding: 8px 12px; }

/* ── Lista en TARJETAS (motor 0.35, `list.variant: "cards"`) ─────────────────
   Pedido de Comando para la lista de reportes de campo: «ostentosidad». Cada
   fila es una tarjeta con una franja luminosa del color de su intención
   (`item.tone`: vencido rojo, urgente naranja, normal azul), un medallón con el
   dibujo del pack en el mismo lenguaje que el dock, la etiqueta de «vencido»
   con pulso de alarma y entrada en cascada. El subtítulo (cuánto falta ·
   dirección) no se corta: es lo que decide qué se atiende primero. Revisado en
   Chromium, claro y oscuro, antes de subir. */
.sdui-root.sdui-root .sdui-list.sdui-list-cards {
  display: flex; flex-direction: column; gap: 12px;
  background: none; border: 0; box-shadow: none; padding: 4px 2px 8px; overflow: visible;
}
.sdui-root.sdui-root .sdui-list-cards > :is(.sdui-list-row, .sdui-list-swipe) {
  --fila: var(--c-btn-info);
  --fila-rgb: 29, 78, 216;
  position: relative;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-surface-bright, #fff);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px -12px rgba(var(--fila-rgb), .55), 0 2px 6px rgba(15, 23, 42, .06);
  animation: sdui-fila-entra .42s cubic-bezier(.2, 1.2, .4, 1) both;
}
.sdui-root.sdui-root .sdui-list-cards > :is(.sdui-list-row, .sdui-list-swipe)::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 0 6px 6px 0;
  background: var(--fila); box-shadow: 0 0 12px rgba(var(--fila-rgb), .8); z-index: 2;
}
.sdui-root.sdui-root .sdui-list-cards > [data-tone='warning'] { --fila: #f97316; --fila-rgb: 234, 88, 12; }
.sdui-root.sdui-root .sdui-list-cards > [data-tone='critical'] { --fila: #dc2626; --fila-rgb: 220, 38, 38; }
.sdui-root.sdui-root .sdui-list-cards > [data-tone='success'] { --fila: #16a34a; --fila-rgb: 22, 163, 74; }
.sdui-root.sdui-root .sdui-list-cards > :nth-child(2) { animation-delay: .05s; }
.sdui-root.sdui-root .sdui-list-cards > :nth-child(3) { animation-delay: .1s; }
.sdui-root.sdui-root .sdui-list-cards > :nth-child(4) { animation-delay: .15s; }
.sdui-root.sdui-root .sdui-list-cards > :nth-child(5) { animation-delay: .2s; }
.sdui-root.sdui-root .sdui-list-cards > :nth-child(n+6) { animation-delay: .25s; }
@keyframes sdui-fila-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.sdui-root.sdui-root .sdui-list-cards .sdui-list-row {
  gap: 14px; padding: 14px 12px 14px 18px; border: 0; background: transparent; min-height: 84px; align-items: center;
}
.sdui-root.sdui-root .sdui-list-cards .sdui-list-swipe-track { background: var(--c-surface-bright, #fff); }
/* el medallón: mismo lenguaje que el dock */
.sdui-root.sdui-root .sdui-list-cards .sdui-list-icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background-color: var(--fila, var(--c-btn-info));
  background-image: radial-gradient(120% 95% at 50% 12%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.1) 42%, rgba(255,255,255,0) 60%, rgba(0,0,0,.14) 100%);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), 0 6px 14px -5px rgba(var(--fila-rgb, 29,78,216), .6);
}
.sdui-root.sdui-root .sdui-list-cards .sdui-list-row[data-tone='warning'] .sdui-list-icon { --fila: #f97316; --fila-rgb: 234, 88, 12; }
.sdui-root.sdui-root .sdui-list-cards .sdui-list-row[data-tone='critical'] .sdui-list-icon { --fila: #dc2626; --fila-rgb: 220, 38, 38; }
.sdui-root.sdui-root .sdui-list-cards .sdui-list-icon .sdui-icon-pack { width: 1.35em; height: 1.35em; }
.sdui-root.sdui-root .sdui-list-cards .sdui-list-icon img { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.sdui-root.sdui-root .sdui-list-cards .sdui-list-title { font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.sdui-root.sdui-root .sdui-list-cards .sdui-list-sub { font-weight: 600; }
.sdui-root.sdui-root .sdui-list-cards .sui-badge { font-weight: 800; letter-spacing: .06em; }
.sdui-root.sdui-root .sdui-list-cards .sui-badge-danger { background: #dc2626; color: #fff; border-color: transparent; box-shadow: 0 0 0 0 rgba(220,38,38,.55); animation: sdui-fila-alarma 1.8s ease-out infinite; }
@keyframes sdui-fila-alarma { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); } 70% { box-shadow: 0 0 0 9px rgba(220,38,38,0); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } }
.sdui-root.sdui-root .sdui-list-cards .sdui-list-clickable:active { transform: scale(.985); }
:root:not([data-theme='light']) .sdui-root.sdui-root .sdui-list-cards > :is(.sdui-list-row, .sdui-list-swipe),
:root:not([data-theme='light']) .sdui-root.sdui-root .sdui-list-cards .sdui-list-swipe-track {
  background: rgba(13, 18, 31, .82);
}
:root:not([data-theme='light']) .sdui-root.sdui-root .sdui-list-cards > :is(.sdui-list-row, .sdui-list-swipe) {
  box-shadow: 0 0 0 1px rgba(var(--fila-rgb), .35), 0 10px 26px -14px rgba(var(--fila-rgb), .8);
}
@media (prefers-reduced-motion: reduce) {
  .sdui-root.sdui-root .sdui-list-cards > *, .sdui-root.sdui-root .sdui-list-cards .sui-badge-danger { animation: none; }
}
/* En tarjeta, el subtítulo (cuánto falta · dirección) no se corta: es lo que
   decide qué se atiende primero. Hasta dos líneas. */
.sdui-root.sdui-root .sdui-list-cards .sdui-list-sub {
  white-space: normal; overflow: hidden; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0;
}

/* ── Equipos, organigrama con caras y mover dentro del árbol (motor 0.36) ────
   person_picker con `multiple`, grupos, chips de estado y personas bloqueadas;
   tree con `card` y `onNodeMove`. El vidrio y el filo cian del resto del panel.
   Los chips de estado llevan el radio pequeño de las etiquetas técnicas
   (DESIGN §Shapes) pero NO van en mayúsculas: dicen frases con fecha («De
   reposo hasta el 30») y en mayúsculas se cortaban en «DE VACA…» dentro de una
   tarjeta del organigrama — se perdía justo el estado. Tokens del host, en los
   dos temas. */
.sdui-root.sdui-root .sdui-chip {
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 7px;
}
/* La cabecera de grupo del selector: vidrio opaco (se queda pegada arriba
   mientras se recorre su gente) y el nombre en cian cristalino. */
.sdui-root.sdui-root .sdui-ppick-ghead {
  background: var(--c-surface-container);
  border-bottom-color: var(--c-border-glass);
  color: var(--c-text-cyan);
}
.sdui-root.sdui-root .sdui-ppick-row.is-picked { box-shadow: 0 0 12px var(--c-primary-glow-soft); }
.sdui-root.sdui-root .sdui-ppick-gall.is-picked .sdui-ppick-check,
.sdui-root.sdui-root .sdui-ppick-gall.is-mixed .sdui-ppick-check { box-shadow: 0 0 8px var(--c-primary-glow); }
/* La tarjeta del organigrama: la cara con filo, como en la ficha de una persona. */
.sdui-root.sdui-root .sdui-tg-ava { box-shadow: 0 0 0 2px var(--c-surface-container), 0 0 12px var(--c-primary-glow-soft); }
/* Mover: el destino se enciende; «aquí no» va discontinuo en el rojo del sistema. */
.sdui-root.sdui-root .sdui-tg-box.is-drop-ok { box-shadow: 0 0 0 2px var(--c-primary-bright), var(--glow-primary-strong); }
.sdui-root.sdui-root .sdui-tg-box.is-drop-no { border-color: var(--c-error); }
.sdui-root .sdui-tg-marco .sdui-tg-box {
  background: var(--c-glass-strong);
  border-color: var(--c-border-glass-strong);
  box-shadow: var(--glow-primary-strong);
}
.sdui-root .sdui-tg-nota { background: var(--c-glass-strong); letter-spacing: 0.3px; }
.sdui-root .sdui-tg-move-opt:hover,
.sdui-root .sdui-tg-move-opt.is-active { background: var(--c-primary-glow-soft); border-color: var(--c-border-glass-strong); }
.sdui-root .sdui-tg-move-ruta { color: var(--c-text-muted); }