/* Pestaña «Alertas» de cada área (js/alertas.js): lista compacta y fácil de leer.
   Cada alerta: icono · título · tipo · cuándo (fecha completa al pasar el ratón) / código y cliente / detalle breve,
   con los botones pequeños a la derecha en PC. Barra de color a la izquierda según el tipo o la urgencia.
   Solo variables del tema (claro y oscuro). Las vistas Mini y Tabla siguen funcionando igual. */

.alertas-lista.al-v2{gap:6px;padding:12px 16px}
/* «Fichas» es una lista de una columna (caben muchas más alertas y se leen de arriba a abajo) */
.alertas-lista.al-v2.v-fichas{display:flex;flex-direction:column}

/* Grupo: «Fichas frenadas o devueltas», «Avisos», «Reportes y devoluciones» */
.al-v2 .al-grupo{display:flex;align-items:center;gap:7px;margin:8px 2px 0;font-size:12px;font-weight:600;color:var(--muted)}
.al-v2 .al-grupo:first-child{margin-top:0}
.al-v2 .al-grupo .i{width:14px;height:14px}
.al-v2 .al-grupo small{min-width:20px;height:18px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--sunken);color:var(--ink2);font-size:11px;font-weight:700}
.alertas-lista.al-v2.v-tabla>.al-grupo,.alertas-lista.al-v2.v-mini>.al-grupo{margin:0;padding:6px 12px;background:var(--sunken);border-top:1px solid var(--line)}
.alertas-lista.al-v2.v-tabla>.al-grupo:first-child,.alertas-lista.al-v2.v-mini>.al-grupo:first-child{border-top:0}

/* ---------- Cada alerta ---------- */
.al-v2 .alerta-item{--al-c:var(--bad);display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:center;
  padding:9px 12px 9px 10px;border-radius:12px;border:1px solid var(--line);border-left:3px solid var(--al-c);background:var(--surface);
  transition:border-color .15s,box-shadow .15s}
.al-v2 .alerta-item:hover{box-shadow:var(--shadow)}
.al-v2 .alerta-item.warn{--al-c:var(--warn)}
.al-v2 .alerta-item.stop{--al-c:var(--bad);background:color-mix(in srgb,var(--bad-soft) 55%,var(--surface))}
.al-v2 .alerta-item.recordar{--al-c:var(--primary)}
.al-v2 .alerta-item.recordar.urg{--al-c:var(--warn)}
.al-v2 .alerta-item.recordar[data-tipo="precio"]{--al-c:var(--mag)}
.al-v2 .alerta-item.recordar[data-tipo="mencion"],.al-v2 .alerta-item.recordar[data-tipo="respuesta_adm"]{--al-c:var(--primary)}

.al-v2 .ai-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;padding:0;align-self:start;margin-top:1px;
  color:var(--al-c);background:color-mix(in srgb,var(--al-c) 13%,transparent)}
.al-v2 .alerta-item.warn .ai-ic,.al-v2 .alerta-item.recordar .ai-ic{color:var(--al-c)}
.al-v2 .ai-ic .i{width:15px;height:15px}
.al-v2 .ai-b{gap:3px;min-width:0}

/* Línea 1: título, tipo y cuándo */
.al-v2 .ai-h{gap:6px 8px;flex-wrap:wrap;align-items:center;min-width:0}
.al-v2 .ai-t{font-size:13.5px;font-weight:650;line-height:1.3;color:var(--ink)}
.al-v2 .ai-h .chip{font-size:10.5px;padding:1px 8px;font-weight:600}
.al-v2 .ai-cuando{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;cursor:default}

/* Línea 2: código y cliente */
.al-v2 .ai-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font-size:12.5px;line-height:1.35;min-width:0}
.al-v2 .ai-ctx>*+*::before{content:"·";margin:0 7px;color:var(--muted)}
.al-v2 .ai-ctx .link{font-size:12.5px;text-align:left;font-weight:600;text-decoration:none}
.al-v2 .ai-ctx .link:hover{text-decoration:underline}
.al-v2 .ai-ctx .code{font-size:11.5px}

/* Detalle breve */
.al-v2 .ai-b>.desc,.al-v2 .ai-txt{margin:0;padding:0;background:none;border:0;font-size:12.5px;line-height:1.4;color:var(--ink2)}
.al-v2 .ai-txt b{font-weight:600;color:var(--ink)}

/* Botones: pequeños, en la misma fila, a la derecha */
.al-v2 .ai-acts{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;grid-column:3;grid-row:1;align-self:center;max-width:360px}
.al-v2 .ai-acts .btn.sm{min-height:28px;padding:3px 11px;font-size:12px;border-radius:999px;white-space:nowrap;gap:5px}
.al-v2 .ai-acts .btn .i{width:13px;height:13px}

/* ---------- Cambio de precio: una línea con antes → ahora e impacto ---------- */
.al-v2 .precio-cmp.pc2{display:flex;flex-direction:column;gap:2px;margin:0}
.al-v2 .pc2-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:13px}
.al-v2 .pc2-prod{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.al-v2 .pc2-prod b{font-weight:600}
.al-v2 .pc2-prod .code{font-size:11.5px}
.al-v2 .pc2-v{display:inline-flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums;cursor:default}
.al-v2 .pc2-v s{color:var(--muted);text-decoration-thickness:1px}
.al-v2 .pc2-fl{color:var(--muted)}
.al-v2 .pc2-v b{font-size:13.5px;color:var(--ink)}
.al-v2 .pc2-v small{font-size:11px;color:var(--muted)}
.al-v2 .pc2-imp{display:inline-flex;align-items:baseline;gap:5px;padding:1px 9px;border-radius:999px;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;cursor:default}
.al-v2 .pc2-imp small{font-weight:500;font-size:11px;opacity:.85}
.al-v2 .pc2-imp.sube{background:var(--ok-soft);color:var(--ok)}
.al-v2 .pc2-imp.baja{background:var(--bad-soft);color:var(--bad)}
.al-v2 .pc2-s{display:flex;flex-wrap:wrap;gap:1px 14px;font-size:11.5px;color:var(--muted)}
.al-v2 .pc2-s b{font-weight:600;color:var(--ink2)}
.al-v2 .pc2-sin{color:var(--warn)}

/* Vistas Mini y Tabla: se respeta su forma; solo se ordenan los botones y el precio */
.alertas-lista.al-v2.v-tabla>.alerta-item,.alertas-lista.al-v2.v-mini>.alerta-item{border-left:3px solid var(--al-c)}
.alertas-lista.al-v2.v-mini .ai-cuando{margin-left:0}
.alertas-lista.al-v2.v-mini .pc2-s{display:none}

/* Teléfono: los botones bajan a su propia fila */
@media (max-width:700px){
  .alertas-lista.al-v2{padding:10px}
  .al-v2 .alerta-item{grid-template-columns:28px minmax(0,1fr);padding:9px 10px}
  .al-v2 .ai-ic{width:28px;height:28px}
  .al-v2 .ai-acts{grid-column:1/-1;grid-row:auto;justify-content:flex-end;max-width:none;width:auto;padding-top:4px;border-top:1px dashed var(--line);margin-top:2px}
  .al-v2 .ai-cuando{margin-left:0}
}