/* ============================================================
   APEX — AÑADIR ACTIVIDAD y LA ACTIVIDAD EN CONEXIONES
   (Activity everywhere)

   TODA regla de esta hoja lleva el prefijo `.aa-` (el diálogo) o
   `.axf-` (la lista de actividad de Conexiones): sin esas clases la
   hoja es inerte. Ni un color propio: todo sale de los tokens de
   `base.css`, así que se ve igual de bien en claro y en oscuro.
   Se carga ANTES de `mode.css`, que sigue siendo la última.
   ============================================================ */

/* ---------- El diálogo: FLOTANTE, así que lleva sombra ---------- */
.aa-dialog{
  width:min(580px, calc(100vw - 32px)); max-height:calc(100vh - 48px); box-sizing:border-box;
  padding:0; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg);
  overflow:auto;
}
.aa-dialog::backdrop{ background:rgba(20,12,8,.42); }
.aa-in{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:14px; }
.aa-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.aa-h > div{ min-width:0; }
.aa-h h2{ margin:0; font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-0.01em; }
.aa-sub{ margin:3px 0 0; color:var(--muted); font-size:var(--text-body-sm-size); line-height:1.45; }

.aa-dest{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.aa-dest[hidden]{ display:none; }
.aa-dest-l{ font-size:12.5px; font-weight:650; color:var(--muted); }
.aa-tabs{ align-self:flex-start; max-width:100%; overflow-x:auto; }
.aa-tabs[hidden]{ display:none; }
.aa-pane{ display:flex; flex-direction:column; gap:14px; }
.aa-pane[hidden]{ display:none; }

/* Cuatro datos a la vista, en dos columnas; el resto replegado. */
.aa-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px 14px; }
.aa-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.aa-field.is-wide{ grid-column:1 / -1; }
.aa-label{ font-size:12.5px; font-weight:650; color:var(--muted); }
.aa-req{ font-weight:500; color:var(--muted2); }
input.aa-input, textarea.aa-input{
  width:100%; box-sizing:border-box; min-height:40px;
  padding:8px var(--space-3);
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text);
  font-family:var(--font-body); font-size:14px;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input.aa-input::placeholder, textarea.aa-input::placeholder{ color:var(--muted2); }
input.aa-input:focus, textarea.aa-input:focus{  border-color:var(--muted2); box-shadow:var(--shadow-focus); }
input.aa-num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
input.aa-sym{ text-transform:uppercase; font-weight:600; letter-spacing:.01em; }
textarea.aa-text{ resize:vertical; line-height:1.45; }
/* La dirección dentro de un formulario se lee como un CAMPO: el mismo
   contorno y la misma altura que los de al lado; el segmentado del
   sistema pone el aspecto de cada opción. */
.aa-intent{ width:100%; box-sizing:border-box; min-height:40px; padding:3px; gap:3px; flex-wrap:nowrap;
  border:1px solid var(--border); border-radius:var(--r-sm); }
.aa-intent .ui-seg-i{ flex:1 1 0; height:32px; border-radius:var(--r-xs); font-size:13px; }
.aa-field.is-bad .aa-intent{ border-color:var(--red-text); }
.aa-field.is-bad input.aa-input, .aa-field.is-bad textarea.aa-input{ border-color:var(--red-text); }
.aa-err{ font-size:12px; color:var(--red-text); }
.aa-err:empty{ display:none; }

/* La procedencia de cada dato: se lee como su origen, no como su nombre. */
.aa-origin{ font-size:11.5px; font-weight:600; }
.aa-origin:empty{ display:none; }
.aa-origin.is-ai{ color:var(--amber-text); }
.aa-origin.is-user{ color:var(--muted); }

.aa-more > summary{ font-size:13px; }
.aa-more .aa-grid{ padding-top:var(--space-3); }

/* «APEX detectó…»: un filo, no una caja con relleno. */
.aa-detected{ border-left:2px solid var(--amber); padding:2px 0 2px 12px; font-size:13.5px; line-height:1.5; }
.aa-detected[hidden]{ display:none; }
.aa-detected p{ margin:0; }
.aa-detected .aa-sub{ margin-top:4px; }
.aa-notes{ margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:12.5px; display:flex; flex-direction:column; gap:2px; }

.aa-note{ margin:0; }
.aa-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }

/* La imagen */
.aa-drop{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:26px 16px; text-align:center; cursor:pointer;
  border:1px dashed var(--border); border-radius:var(--r-md); color:var(--muted);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.aa-drop:hover,.aa-drop.is-over{ border-color:var(--muted2); background:var(--surface2); }
.aa-drop.is-over{ border-style:solid; }
.aa-thumb{ display:block; max-width:100%; max-height:140px; margin:0 0 8px; border:1px solid var(--border); border-radius:var(--r-sm); object-fit:contain; background:var(--surface2); }
.aa-missing{ margin:6px 0 0; font-size:13px; color:var(--text); }
.aa-drop:focus-within{ box-shadow:var(--shadow-focus); }
.aa-file{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.aa-drop-ic{ color:var(--muted2); line-height:0; }
.aa-drop-t{ font-size:14px; font-weight:600; color:var(--text); }
.aa-drop-s{ font-size:12.5px; }
.aa-preview{ border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; background:var(--surface2); max-height:260px; display:flex; justify-content:center; }
.aa-preview[hidden]{ display:none; }
.aa-preview img{ max-width:100%; max-height:260px; object-fit:contain; display:block; }

/* Archivo o bróker: dos filas con filete, no dos tarjetas. */
.aa-ways{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.aa-ways li{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:14px 0; border-bottom:1px solid var(--border); }
.aa-ways li > div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.aa-ways strong{ font-size:14px; }
.aa-ways span{ font-size:12.5px; color:var(--muted); line-height:1.45; }
.aa-ways .ui-btn{ flex:0 0 auto; }

/* Hecho */
.aa-done{ display:flex; flex-direction:column; gap:6px; padding:6px 0 2px; }
.aa-done[hidden]{ display:none; }
.aa-done-ic{ color:var(--green-text); line-height:0; }
.aa-done-t{ margin:0; font-size:15px; font-weight:650; }
.aa-done .aa-actions{ margin-top:8px; }

.aa-msg{ margin:0; font-size:13px; color:var(--muted); line-height:1.45; }
.aa-msg:empty{ display:none; }
.aa-msg.is-error{ color:var(--red-text); }
.aa-msg.is-warn{ color:var(--amber-text); }
.aa-msg.is-busy{ color:var(--text); }

@media (max-width:640px){
  .aa-dialog{ width:calc(100vw - 16px); max-height:calc(100vh - 24px); }
  .aa-in{ padding:16px 16px 18px; }
  .aa-grid{ grid-template-columns:minmax(0, 1fr); }
  .aa-ways li{ flex-direction:column; align-items:flex-start; }
  input.aa-input, textarea.aa-input{ font-size:16px; }
}

/* ============================================================
   LA ACTIVIDAD EN CONEXIONES (`.axf-`)
   Filas compactas: activo, sentido, tamaño, precio, hora, origen y
   estado en línea. Lo que pide algo sale arriba.
   ============================================================ */
.axf-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; padding:10px 0 6px; }
.axf-title{ margin:0; font-size:13px; font-weight:650; }
.axf-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.axf-row{
  display:grid; grid-template-columns:minmax(64px, 1fr) 70px minmax(90px, 1.1fr) minmax(90px, 1.2fr) minmax(120px, 1.4fr);
  align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;
}
.axf-asset{ font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.axf-side{ font-size:12px; font-weight:600; color:var(--muted); }
.axf-num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.axf-meta{ color:var(--muted); font-size:12px; line-height:1.35; min-width:0; }
.axf-state{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; white-space:nowrap; }
.axf-dot{ width:7px; height:7px; border-radius:50%; background:var(--muted2); flex:0 0 auto; }
.axf-state.is-ok .axf-dot{ background:var(--green); }
.axf-state.is-warn .axf-dot{ background:var(--amber); }
.axf-state.is-bad .axf-dot{ background:var(--red); }
.axf-state.is-busy .axf-dot{ background:var(--text); }
.axf-state.is-warn{ color:var(--amber-text); }
.axf-state.is-bad{ color:var(--red-text); }
.axf-more{ padding:8px 0 0; }
.axf-empty{ margin:8px 0 0; font-size:13px; color:var(--muted); line-height:1.5; }

@media (max-width:640px){
  .axf-row{ grid-template-columns:minmax(0, 1fr) auto; row-gap:2px; }
  .axf-row .axf-num, .axf-row .axf-side{ grid-column:auto; }
  .axf-row .axf-meta{ grid-column:1 / -1; }
}