/* ============================================================
   APEX ALERTS — la hoja (Fase 7)

   TODA regla de este archivo empieza por `.al-`, y hay una prueba que
   lo comprueba. Es la misma garantía que `.cal-` le da al calendario
   y `.mkw-` a Markets: sin ella, una hoja cargada tarde puede tocar
   cualquier pantalla del producto.

   Ni un color escrito a mano salvo el `#fff` sobre el acento — el
   mismo que ya declaran `site.css` y `landing-v2.css`, porque
   `--blue` es el Indigo oficial y no hay token de «texto sobre acento».

   Una FILA financiera, no una tarjeta. Lo que separa una alerta de la
   siguiente es un filete y el aire: ocho tarjetas con sombra serían
   el muro que este producto lleva cinco fases evitando.
   ============================================================ */
.al-summary{
  margin:0 0 10px; font-size:var(--text-body-sm-size); color:var(--muted);
}
.al-summary strong{ color:var(--text); font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.al-warn{ color:var(--amber-text); font-weight:600; }

/* EL AVISO DE ALCANCE. No es decoración: es la frase que impide que
   el usuario crea que APEX vigila con la pestaña cerrada. Por eso
   tiene fondo propio y no se puede replegar. */
.al-scope{
  margin:0 0 var(--space-5); padding:10px 12px;
  background:var(--surface2); border-radius:var(--r-sm);
  font-size:var(--text-caption-size); line-height:1.55; color:var(--muted);
}
.al-scope strong{ color:var(--text); font-weight:600; }

.al-state{
  margin:0 0 12px; padding:10px 12px;
  background:var(--surface2); border-radius:var(--r-sm);
  font-size:var(--text-body-sm-size); color:var(--muted);
}
.al-state.is-down{ color:var(--text); }

.al-group{ margin:0 0 var(--space-6); }
.al-group-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);
  margin:0 0 4px; padding:0 0 8px; border-bottom:1px solid var(--border);
  font-size:var(--text-body-size); font-weight:700; letter-spacing:-0.01em; color:var(--text);
}
.al-group-n{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--text-caption-size); font-weight:600; color:var(--muted2);
}

.al-list{ list-style:none; margin:0; padding:0; }
.al-row{ border-bottom:1px solid var(--border-soft); }
.al-row:last-child{ border-bottom:0; }

/* LA DISPARADA LLEVA UN FILO, no un fondo de color. Es lo que ya
   ocurrió, así que pesa más — pero un relleno la convertiría en una
   alarma, y esto es una capa de AVISO, no de urgencia. */
.al-row.is-fired{ border-left:2px solid var(--blue); padding-left:10px; }
/* La ciega se apaga: no se sabe si se cumplió, así que no puede
   competir con las que sí se midieron. */
.al-row.is-blind .al-price{ color:var(--muted2); }

.al-line{ display:flex; align-items:stretch; }
.al-main{
  flex:1 1 auto; min-width:0;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;
  align-items:center; gap:var(--space-4);
  padding:13px 0; border:0; background:none; cursor:pointer;
  text-align:left; font:inherit; color:inherit; border-radius:var(--r-xs);
}
.al-main:focus-visible{  box-shadow:var(--shadow-focus); }

.al-id{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.al-tk{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--text-body-size); font-weight:700; letter-spacing:-0.01em; color:var(--text);
}
.al-cond{ font-size:var(--text-caption-size); color:var(--muted); line-height:1.35; }

.al-now{ display:flex; flex-direction:column; gap:1px; min-width:0; text-align:right; }
.al-price{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--text-body-sm-size); font-weight:600; color:var(--text);
}
.al-price.is-none{ font-weight:500; color:var(--muted2); }
.al-state-txt, .al-now .al-state{
  margin:0; padding:0; background:none; border-radius:0;
  font-size:var(--text-caption-size); color:var(--muted2);
}

.al-more{
  display:inline-flex; width:18px; height:18px; color:var(--muted2);
  transition:transform .16s ease;
}
.al-more svg{ width:100%; height:100%; }
.al-row.is-open .al-more{ transform:rotate(180deg); }

/* EL CONTEXTO va bajo la fila y en tinta apagada: acompaña, no
   compite. Si compitiera, la pantalla dejaría de contestar «¿qué
   estoy esperando?» para contestar «¿cómo va mi cartera?». */
.al-ctxs{ display:flex; flex-wrap:wrap; gap:10px; padding:0 0 10px; }
.al-ctx{ font-size:var(--text-caption-size); color:var(--muted); }
.al-ctx.is-up{ color:var(--green-text); font-weight:600; }
.al-ctx.is-down{ color:var(--red-text); font-weight:600; }

.al-detail{ padding:2px 0 14px; }
.al-meta{ margin:0 0 4px; font-size:var(--text-caption-size); color:var(--muted2); }
/* LA FRASE DEL TERCER ESTADO. Se ve, no se esconde: es la que separa
   «no se ha cumplido» de «no se pudo mirar». */
.al-blind{
  margin:0 0 8px; padding:8px 10px;
  background:var(--surface2); border-radius:var(--r-sm);
  font-size:var(--text-caption-size); line-height:1.5; color:var(--text);
}
.al-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:10px; }

.al-empty{ padding:var(--space-6) 0; max-width:60ch; }
.al-h{ margin:0 0 6px; font-size:var(--text-body-size); font-weight:700; color:var(--text); }
.al-sub{ margin:0 0 var(--space-4); font-size:var(--text-body-sm-size); line-height:1.6; color:var(--muted); }
.al-empty-acts{ display:flex; flex-wrap:wrap; gap:var(--space-2); }

.al-skel{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--space-4); padding:15px 0; border-bottom:1px solid var(--border-soft); }
.al-skel span{ height:12px; border-radius:6px; }
.al-skel-a{ width:52%; }
.al-skel-b{ width:38%; justify-self:end; }
.al-list.is-loading{ pointer-events:none; }

/* ============================================================
   EL DIÁLOGO DE CREACIÓN — `<dialog>` nativo

   Trae la trampa de foco, el cierre con Escape y el velo sin una
   línea de JavaScript. Tres campos y ninguno más: el encargo pide
   que crear una alerta sea rápido, no un formulario de quince campos.
   ============================================================ */
.al-dialog{
  width:min(420px, calc(100vw - 32px));
  padding:0; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg);
}
/* EL VELO. `#000` es el único literal además del `#fff` sobre el
   acento, y por el mismo motivo: no hay token de velo en `base.css`
   —los diálogos que ya existen se lo escriben a mano, cada uno el
   suyo— y un velo tiene que ser oscuro en los DOS temas, así que no
   se puede derivar de `--bg` (crema en claro) ni de `--text` (crema
   en oscuro). Crear `--scrim` sería tocar el sistema de diseño
   global, que esta fase no hace. */
.al-dialog::backdrop{ background:color-mix(in srgb, #000 42%, transparent); }
.al-form{ display:flex; flex-direction:column; gap:6px; padding:var(--space-5); }
.al-form-h{ margin:0; font-size:var(--text-body-size); font-weight:700; color:var(--text); }
.al-form-asset{
  margin:0 0 6px; font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--text-h3-size); font-weight:700; letter-spacing:-0.02em; color:var(--text);
}
.al-select, .al-input{
  width:100%; height:var(--ctl-h-md); padding:0 12px; margin:0 0 6px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--bg); color:var(--text); font:inherit;
  font-size:var(--text-body-sm-size);
}
.al-input{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.al-select:focus-visible, .al-input:focus-visible{  box-shadow:var(--shadow-focus); }

.al-sugs{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin:2px 0 6px; }
.al-sugs-k{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2);
}
.al-form-note{
  margin:0 0 4px; font-size:var(--text-caption-size); line-height:1.5; color:var(--muted);
}
.al-form-note.is-error{ color:var(--red-text); }
.al-form-acts{ display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:6px; }

/* ============================================================
   MÓVIL — composición propia, no el escritorio encogido
   ============================================================ */
@media (max-width:640px){
  .al-main{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'id now' 'id more';
    gap:2px var(--space-3); padding:12px 0;
  }
  .al-id{ grid-area:id; }
  .al-now{ grid-area:now; }
  .al-more{ grid-area:more; justify-self:end; align-self:center; }
  .al-acts{ gap:6px; }
  /* Los botones de acción caben o se envuelven, pero NUNCA se salen:
     una acción fuera de pantalla es una acción que no existe. */
  .al-acts .ui-btn{ flex:0 1 auto; min-width:0; }
  .al-form-asset{ font-size:var(--text-body-size); }
}

/* El acceso a «crear alerta» desde el detalle de una fila de
   seguimiento. Vive en ESTA hoja y no en `investment.css` porque es
   parte de la capa de alertas: si algún día se retira, se retira
   entera y en un solo archivo. */
.al-from-wl{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:10px; }

/* «Alertas | Avisos» (2026-10-10): el conmutador que une las dos
   pantallas de Trading en un centro, como las pestañas del de Inversión.
   El control es el segmentado del sistema; aquí solo su sitio. */
.al-center-switch{ align-self:flex-start; margin:0 0 var(--space-4); }
.al-center-n{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px;
  border-radius:var(--r-pill); background:var(--blue-fill); color:#fff; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
.al-center-n[hidden]{ display:none; }