/* ============================================================
   OnAxis ERP · feedback.css  v1.0
   Modales, drawers, toasts, alertas, estados vacíos, progreso
   + chrome de visualización (viz.css consolidado aquí).
   Depende de: css/tokens.css · css/actions.css (.btn, .icon)
   ------------------------------------------------------------
   PATRÓN DE PANELES: todo panel emergente (.modal__backdrop,
   .modal, .drawer) nace con display:none y se muestra al añadir
   la clase .is-open. La animación de entrada corre al montarse
   porque el cambio de display reinicia los keyframes.
   ============================================================ */


/* ============================================================
   BLOQUE 1 · FEEDBACK
   ============================================================ */

/* ---------- Keyframes compartidos ---------- */
@keyframes oa-fade-in{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes oa-modal-in{
  from{ opacity:0; transform:scale(.98); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes oa-drawer-in{
  from{ transform:translateX(100%); }
  to  { transform:translateX(0); }
}
@keyframes oa-toast-in{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
/* Barra de auto-cierre del toast: corre hacia width 0 */
@keyframes oa-toast-timer{
  from{ width:100%; }
  to  { width:0; }
}
@keyframes oa-spin{
  to{ transform:rotate(360deg); }
}
@keyframes oa-stripes{
  to{ background-position:28px 0; }
}

/* ---------- Modal ---------- */

/* Backdrop fijo; oculto por defecto, visible con .is-open (fade --t-med).
   Se comparte también como fondo del .drawer. */
.modal__backdrop{
  position:fixed;
  inset:0;
  background:var(--overlay);
  z-index:var(--z-modal);
  display:none;

  &.is-open{
    display:block;
    animation:oa-fade-in var(--t-med) both;
  }
}

/* Caja del modal: centrada, oculta por defecto → .is-open */
.modal{
  position:fixed;
  inset:0;
  margin:auto;
  z-index:calc(var(--z-modal) + 1);
  width:min(560px, 92vw);
  height:fit-content;
  max-height:min(84vh, 720px);
  background:var(--bg-1);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  overflow:hidden;               /* recorta esquinas de head/foot */
  display:none;
  flex-direction:column;

  &.is-open{
    display:flex;
    animation:oa-modal-in var(--t-med) both;
  }
}
.modal--sm{ width:min(420px, 92vw); }
.modal--lg{ width:min(760px, 92vw); }

.modal__head{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
  flex:none;
}
.modal__title{
  font-size:var(--fs-h3);
  font-weight:600;
  color:var(--ink);
  line-height:var(--lh-tight);
  margin:0;
  flex:1;
  min-width:0;
}
/* Botón de cierre (.btn--icon.btn--ghost) pegado al borde derecho */
.modal__head > .btn--icon{ margin-left:auto; flex:none; }

.modal__body{
  padding:var(--sp-5);
  overflow-y:auto;
  color:var(--ink);
  flex:1 1 auto;
  min-height:0;
}

.modal__foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);
  background:var(--panel);
  border-top:1px solid var(--line);
  flex:none;

  /* Acción destructiva secundaria: colocarla primera en el DOM
     y queda anclada a la izquierda del pie */
  & > .btn--danger:first-child{ margin-right:auto; }
}

/* Confirmación destructiva: círculo de alerta junto al mensaje */
.modal__danger-ico{
  width:40px;
  height:40px;
  border-radius:var(--r-pill);
  background:var(--danger-bg);
  color:var(--danger);
  display:grid;
  place-items:center;
  flex:none;

  & .icon{ width:20px; height:20px; }
}

/* ---------- Drawer (panel lateral derecho) ---------- */

/* Mismo chrome que .modal; oculto por defecto → .is-open (translateX) */
.drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:calc(var(--z-modal) + 1);
  width:min(480px, 92vw);
  background:var(--bg-1);
  border-left:1px solid var(--line);
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  box-shadow:var(--sh-3);
  overflow:hidden;
  display:none;
  flex-direction:column;

  &.is-open{
    display:flex;
    animation:oa-drawer-in var(--t-med) both;
  }
}

/* Secciones del drawer: reutilizan la anatomía del modal */
.drawer__head{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
  flex:none;
}
.drawer__head > .btn--icon{ margin-left:auto; flex:none; }
.drawer__title{
  font-size:var(--fs-h3);
  font-weight:600;
  color:var(--ink);
  line-height:var(--lh-tight);
  margin:0;
  flex:1;
  min-width:0;
}
.drawer__body{
  padding:var(--sp-5);
  overflow-y:auto;
  color:var(--ink);
  flex:1 1 auto;
  min-height:0;
}
.drawer__foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);
  background:var(--panel);
  border-top:1px solid var(--line);
  flex:none;
}

/* ---------- Toast ---------- */

/* Stack fijo abajo-derecha */
.toasts{
  position:fixed;
  right:var(--sp-5);
  bottom:var(--sp-5);
  z-index:var(--z-toast);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--sp-2);
  pointer-events:none;           /* los toasts sí reciben eventos */
}

.toast{
  pointer-events:auto;
  position:relative;
  overflow:hidden;               /* contiene la barra de progreso */
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-width:300px;
  max-width:420px;
  padding:var(--sp-3) var(--sp-4);
  background:var(--side-bg);   /* tinta constante en ambos temas (como el sidebar) */
  color:var(--side-ink);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  font-size:var(--fs-body);
  animation:oa-toast-in var(--t-med) both;

  /* Barra de auto-cierre: duración por --toast-dur inline (default 5s) */
  &::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:3px;
    width:100%;
    background:var(--gold);
    animation:oa-toast-timer var(--toast-dur, 5s) linear forwards;
  }
  &:hover::after{ animation-play-state:paused; }
}

.toast__ico{ flex:none; }
.toast__msg{ flex:1 1 auto; min-width:0; }
.toast__title{ font-weight:600; }

/* Acción inline (p. ej. "Deshacer") */
.toast__action{
  flex:none;
  background:none;
  border:0;
  padding:2px 4px;
  border-radius:var(--r-xs);
  font:inherit;
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--gold);
  cursor:pointer;
  transition:color var(--t-fast);

  &:hover{ color:var(--gold-soft); text-decoration:underline; }
  &:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
}

/* Botón × de cierre */
.toast__close{
  flex:none;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  background:none;
  border:0;
  border-radius:var(--r-xs);
  color:inherit;
  opacity:.65;
  cursor:pointer;
  transition:opacity var(--t-fast), background var(--t-fast);

  &:hover{
    opacity:1;
    background:color-mix(in srgb, var(--side-ink) 14%, transparent);
  }
  &:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
  & .icon{ width:14px; height:14px; }
}

/* Variantes semánticas: borde izquierdo 3px + color del icono */
.toast--success{ border-left:3px solid var(--success); & .toast__ico{ color:var(--success); } }
.toast--warning{ border-left:3px solid var(--warning); & .toast__ico{ color:var(--warning); } }
.toast--danger { border-left:3px solid var(--danger);  & .toast__ico{ color:var(--danger); } }
.toast--info   { border-left:3px solid var(--info);    & .toast__ico{ color:var(--info); } }

/* ---------- Alert (banner en flujo) ---------- */
.alert{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--neutral-line);
  border-radius:var(--r-md);
  background:var(--neutral-bg);
  color:var(--ink-2);
  font-size:var(--fs-body);
}
.alert__ico{
  flex:none;
  width:18px;
  height:18px;
  margin-top:2px;                /* alineación óptica con la 1ª línea */
}
.alert__content{ flex:1 1 auto; min-width:0; }
.alert__title{
  display:block;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}
.alert__close{
  flex:none;
  width:24px;
  height:24px;
  margin:-2px -4px 0 0;          /* compensa el padding del banner */
  display:grid;
  place-items:center;
  background:none;
  border:0;
  border-radius:var(--r-xs);
  color:var(--muted);
  cursor:pointer;
  transition:color var(--t-fast), background var(--t-fast);

  &:hover{
    color:var(--ink);
    background:color-mix(in srgb, var(--ink) 8%, transparent);
  }
  &:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
  & .icon{ width:14px; height:14px; }
}

/* Las 4 variantes semánticas */
.alert--info   { background:var(--info-bg);    border-color:var(--info-line);    & .alert__ico{ color:var(--info); } }
.alert--success{ background:var(--success-bg); border-color:var(--success-line); & .alert__ico{ color:var(--success); } }
.alert--warning{ background:var(--warning-bg); border-color:var(--warning-line); & .alert__ico{ color:var(--warning); } }
.alert--danger { background:var(--danger-bg);  border-color:var(--danger-line);  & .alert__ico{ color:var(--danger); } }

/* ---------- Empty state ---------- */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:var(--sp-9);
  gap:var(--sp-3);
}
.empty-state__ico{
  width:72px;
  height:72px;
  border-radius:var(--r-pill);
  background:var(--panel-2);
  color:var(--muted-2);
  display:grid;
  place-items:center;
  margin-bottom:var(--sp-1);

  & .icon{ width:40px; height:40px; }
}
.empty-state__title{
  font-size:var(--fs-h3);
  font-weight:600;
  color:var(--ink);
  margin:0;
}
.empty-state__text{
  color:var(--muted);
  max-width:380px;
  margin:0;
}
.empty-state__cta{ margin-top:var(--sp-2); }

/* Variante error: icono #i-warning + CTA "Reintentar" */
.empty-state--error .empty-state__ico{
  background:var(--danger-bg);
  color:var(--danger);
}

/* ---------- Progress ---------- */
.progress{
  height:6px;
  border-radius:var(--r-pill);
  background:var(--neutral-bg);
  overflow:hidden;
}
/* Ancho por style inline: style="--val:64%" (o width directo) */
.progress__bar{
  height:100%;
  width:var(--val, 0%);
  background:var(--gold);
  border-radius:inherit;
  transition:width var(--t-med);
}
/* Batch (timbrado masivo): rayas doradas en movimiento */
.progress--striped .progress__bar{
  background-image:repeating-linear-gradient(
    45deg,
    var(--gold) 0 7px,
    var(--gold-deep) 7px 14px
  );
  background-size:28px 100%;
  animation:oa-stripes 700ms linear infinite;
}

/* ---------- Spinner ---------- */
.spinner{
  display:inline-block;
  width:18px;
  height:18px;
  border:2px solid var(--line-strong);
  border-top-color:var(--gold-deep);
  border-radius:50%;
  animation:oa-spin 700ms linear infinite;
}
.spinner--lg{
  width:28px;
  height:28px;
  border-width:3px;              /* grosor escalado ópticamente */
}

/* ---------- Dot status ---------- */
/* online=success · busy(ocupado)=warning · offline=dim */
.dot-status{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-small);
  color:var(--muted);

  &::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--dim);
    flex:none;
  }
}
.dot-status--online::before { background:var(--success); }
.dot-status--busy::before   { background:var(--warning); }
.dot-status--offline::before{ background:var(--dim); }


/* ============================================================
   BLOQUE 2 · VIZ (chrome de gráficos)
   Los SVG internos usan tokens: --series-1…8, --viz-grid,
   --viz-axis, --viz-label. Texto de valores siempre en tinta
   (--ink / --muted-2), nunca del color de la serie. Un solo
   eje Y; grid horizontal hairline --viz-grid.
   ============================================================ */

/* ---------- Contenedor ---------- */
.viz{
  position:relative;             /* ancla del .viz-tip posicionado por JS */
  width:100%;

  & > svg{
    display:block;
    width:100%;
    height:auto;
  }
}

/* ---------- Leyenda ---------- */
/* Presente siempre con ≥2 series; ítems clicables para atenuar serie */
.viz-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-1) var(--sp-4);
  margin-top:var(--sp-3);
}
.viz-legend__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 4px;
  background:none;
  border:0;
  border-radius:var(--r-xs);
  font:inherit;
  font-size:var(--fs-small);
  color:var(--muted);
  cursor:pointer;
  transition:color var(--t-fast), opacity var(--t-fast);

  &:hover{ color:var(--ink); }
  &:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }

  /* Serie apagada por click */
  &.is-off{
    opacity:.45;

    & .viz-legend__swatch{ background:var(--neutral-line); }
  }
}
/* Color por serie via style inline: style="--swatch:var(--series-2)" */
.viz-legend__swatch{
  width:10px;
  height:10px;
  border-radius:3px;
  background:var(--swatch, var(--series-1));
  flex:none;
  transition:background var(--t-fast);
}

/* ---------- Tooltip de datos ---------- */
/* Caja clara (a diferencia de [data-tip]): fila por serie */
.viz-tip{
  position:absolute;
  z-index:var(--z-tip);
  pointer-events:none;
  min-width:160px;
  padding:var(--sp-2) var(--sp-3);
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-2);
  color:var(--ink);
  font-size:var(--fs-small);
}
.viz-tip__title{
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:var(--sp-1);
}
.viz-tip__row{
  display:flex;
  align-items:center;
  gap:var(--sp-2);

  & + .viz-tip__row{ margin-top:2px; }
}
.viz-tip__swatch{
  width:10px;
  height:10px;
  border-radius:3px;
  background:var(--swatch, var(--series-1));
  flex:none;
}
.viz-tip__label{
  color:var(--muted);
  margin-right:var(--sp-4);
}
.viz-tip__value{
  margin-left:auto;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

/* ---------- Toolbar de gráfico ---------- */
/* Una sola fila: .segmented de periodo + .combobox sm de dimensión */
.viz-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
.viz-toolbar__spacer{ flex:1 1 auto; }