/* ÁTOMOS — la pieza más pequeña e indivisible. No dependen de ningún otro componente.
   Icono · Botón · Insignia · Etiqueta · Campo de texto/lista/área · Casilla · Barra de progreso · Textos de ayuda/error · Tabla básica. */

/* Icono */
.ic{width:1.1em;height:1.1em;vertical-align:-.18em;flex:none}

/* Botón (variantes: por defecto = primario, .sec, .ghost, .bad; tamaño .sm) */
button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-h);padding:0 var(--space-4);
  border-radius:var(--radius-md);border:var(--border-w) solid var(--color-brand);
  background:var(--color-brand);color:var(--color-brand-contrast);
  font-size:var(--text-base);font-weight:var(--weight-medium);cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background var(--motion-fast);
}
button:hover:not(:disabled){background:var(--color-brand-hover);border-color:var(--color-brand-hover)}
button:disabled{opacity:.5;cursor:not-allowed}
button.sec,button.ghost{background:var(--color-surface);color:var(--color-brand);border-color:var(--color-brand)}
button.sec:hover:not(:disabled),button.ghost:hover:not(:disabled){background:var(--color-brand-soft);border-color:var(--color-brand)}
button.ghost{border-color:transparent;box-shadow:none;padding:0 var(--space-3);color:var(--color-text)}
button.bad{background:var(--color-danger);border-color:var(--color-danger);color:var(--color-brand-contrast)}
button.bad:hover:not(:disabled){background:var(--color-danger);opacity:.9}
button.sm{height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--text-sm)}
.btnlike{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-md);background:var(--color-brand);color:var(--color-brand-contrast);font-weight:var(--weight-medium);cursor:pointer}

/* Variante secundaria del botón-etiqueta */
.btnlike.sec{background:var(--color-surface);color:var(--color-brand);border:var(--border-w) solid var(--color-brand)}

/* Insignia de estado (.b + estado) */
.b{
  display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap;
  padding:1px var(--space-3);border-radius:var(--radius-pill);border:var(--border-w) solid transparent;
  font-size:var(--text-sm);font-weight:var(--weight-semibold);
  background:var(--color-brand-soft);color:var(--color-text-muted);
}
.b.registrado,.b.cerrado,.b.firmado,.b.enviado{background:var(--color-success-soft);color:var(--color-success);border-color:var(--color-success-border)}
.b.pendiente,.b.borrador_sin_origen,.b.borrador{background:var(--color-warning-soft);color:var(--color-warning);border-color:var(--color-warning-border)}
.b.sin_novedad{background:var(--color-brand-soft);color:var(--color-text);border-color:var(--color-border)}
.b.en_proceso{background:var(--color-info-soft);color:var(--color-info);border-color:var(--color-info-border)}
.b.abierto{background:var(--color-open-soft);color:var(--color-open);border-color:var(--color-open-border)}
.b.reabierto{background:var(--color-reopen-soft);color:var(--color-reopen);border-color:var(--color-reopen-border)}
.b.anulado{background:var(--color-danger-soft);color:var(--color-danger);border-color:var(--color-danger-border)}

/* Etiquetas: POR VALIDAR (.pv) y catálogo de ejemplo (.ej) */
.pv{display:inline-block;margin-left:var(--space-1);padding:0 var(--space-2);border:var(--border-w) dashed var(--color-validate);border-radius:var(--radius-sm);background:var(--color-validate-soft);color:var(--color-validate);font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.ej{padding:0 var(--space-2);border:var(--border-w) solid var(--color-warning-border);border-radius:var(--radius-sm);background:var(--color-warning-soft);color:var(--color-warning);font-size:var(--text-xs);font-weight:var(--weight-semibold)}

/* Controles de texto */
input,select,textarea{
  height:var(--control-h);padding:0 var(--space-3);
  border:var(--border-w) solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface);color:var(--color-text);font-size:var(--text-base);
}
textarea{height:auto;padding:var(--space-2) var(--space-3)}
input[type=checkbox]{width:auto;height:auto}
input.inv,select.inv,textarea.inv{border-color:var(--color-danger);background:var(--color-danger-soft)}

/* Casilla con etiqueta */
.chkl{display:flex;gap:var(--space-2);align-items:center;font-weight:var(--weight-regular)}
.chkl.big{font-size:var(--text-base)}
.chkl input{width:1.25rem!important;height:1.25rem!important}

/* Barra de progreso */
.bar{height:.625rem;margin:var(--space-2) 0;border-radius:var(--radius-pill);background:var(--color-brand-soft);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cat-1),var(--cat-3));transition:width var(--motion-base)}

/* Textos de apoyo */
.why{display:block;max-width:14rem;margin-top:2px;font-size:var(--text-xs);font-style:italic;color:var(--color-text-muted)}
.ay{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--color-text-muted)}
.ferr{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--color-danger)}
.ferr:empty{display:none}
.vok{display:inline-flex;color:var(--color-success)}

/* Tabla básica */
table{width:100%;border-collapse:collapse;font-size:var(--text-base)}
th,td{padding:var(--space-2);text-align:left;vertical-align:top;border-bottom:var(--border-w) solid var(--color-border)}
td.activa{background:var(--color-brand-soft)}
th{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-brand)}